preliminary work

src/route-config.ts

@@ -220,12 +220,24 @@ export const routes: RoutesFn = (t: TFunction) => [
     breadcrumb: t("common:settings"),
     access: "view-realm",
   },
+  {
+    path: "/:realm/user-federation/kerberos/new",
+    component: UserFederationKerberosSettings,
+    breadcrumb: t("common:settings"),
+    access: "view-realm",
+  },
   {
     path: "/:realm/user-federation/ldap/:id",
     component: UserFederationLdapSettings,
     breadcrumb: t("common:settings"),
     access: "view-realm",
   },
+  {
+    path: "/:realm/user-federation/ldap/new",
+    component: UserFederationLdapSettings,
+    breadcrumb: t("common:settings"),
+    access: "view-realm",
+  },
   {
     path: "/:realm/",
     component: DashboardSection,

src/user-federation/UserFederationKerberosSettings.tsx

@@ -92,6 +92,8 @@ export const UserFederationKerberosSettings = () => {
   }, []);
 
   const setupForm = (component: ComponentRepresentation) => {
+    console.log("READING as:");
+    console.log(component);
     Object.entries(component).map((entry) => {
       form.setValue(
         "config.allowPasswordAuthentication",
@@ -105,6 +107,8 @@ export const UserFederationKerberosSettings = () => {
   };
 
   const save = async (component: ComponentRepresentation) => {
+    console.log("SAVING as:");
+    console.log(component);
     try {
       await adminClient.components.update({ id }, component);
       setupForm(component as ComponentRepresentation);

src/user-federation/UserFederationSection.tsx

@@ -26,6 +26,8 @@ import { useAdminClient, asyncStateFetch } from "../context/auth/AdminClient";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import "./user-federation.css";
 
+import { useHistory, useRouteMatch } from "react-router-dom";
+
 export const UserFederationSection = () => {
   const [userFederations, setUserFederations] = useState<
     ComponentRepresentation[]
@@ -37,6 +39,9 @@ export const UserFederationSection = () => {
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
 
+  const { url } = useRouteMatch();
+  const history = useHistory();
+
   useEffect(() => {
     return asyncStateFetch(
       () => {
@@ -53,8 +58,8 @@ export const UserFederationSection = () => {
   }, [key]);
 
   const ufAddProviderDropdownItems = [
-    <DropdownItem key="itemLDAP">LDAP</DropdownItem>,
-    <DropdownItem key="itemKerberos">Kerberos</DropdownItem>,
+    <DropdownItem key="itemLDAP" onClick={() => history.push(`${url}/ldap/new`)}>LDAP</DropdownItem>,
+    <DropdownItem key="itemKerberos" onClick={() => history.push(`${url}/kerberos/new`)}>Kerberos</DropdownItem>,
   ];
 
   const learnMoreLinkProps = {