Added group sync to group mapper (#3943)

apps/admin-ui/public/resources/en/user-federation.json

@@ -10,6 +10,10 @@
   "addLdapWizardTitle": "Add LDAP user federation provider",
   "syncChangedUsers": "Sync changed users",
   "syncAllUsers": "Sync all users",
+  "syncLDAPGroupsToKeycloak": "Sync LDAP groups to Keycloak",
+  "syncKeycloakGroupsToLDAP": "Sync Keycloak groups to LDAP",
+  "syncLDAPGroupsSuccessful": "Data successfully synced {{result}}",
+  "syncLDAPGroupsError": "Data could not be synced due {{error}}",
   "unlinkUsers": "Unlink users",
   "removeImported": "Remove imported",
   "deleteProvider": "Delete provider",

apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperDetails.tsx

@@ -32,6 +32,7 @@ import { KeycloakSpinner } from "../../../components/keycloak-spinner/KeycloakSp
 import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 import { toUserFederationLdap } from "../../routes/UserFederationLdap";
 import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDialog";
+import { DirectionType } from "libs/keycloak-admin-client/lib/resources/userStorageProvider";
 
 export default function LdapMapperDetails() {
   const form = useForm<ComponentRepresentation>();
@@ -46,6 +47,8 @@ export default function LdapMapperDetails() {
   const { addAlert, addError } = useAlerts();
 
   const [isMapperDropdownOpen, setIsMapperDropdownOpen] = useState(false);
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(key + 1);
 
   useFetch(
     async () => {
@@ -118,6 +121,24 @@ export default function LdapMapperDetails() {
     }
   };
 
+  const sync = async (direction: DirectionType) => {
+    try {
+      const result = await adminClient.userStorageProvider.mappersSync({
+        parentId: mapping?.parentId || "",
+        id: mapperId,
+        direction,
+      });
+      addAlert(
+        t("syncLDAPGroupsSuccessful", {
+          result: result.status,
+        })
+      );
+    } catch (error) {
+      addError("user-federation:syncLDAPGroupsError", error);
+    }
+    refresh();
+  };
+
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
     titleKey: "common:deleteMappingTitle",
     messageKey: "common:deleteMappingConfirm",
@@ -141,16 +162,17 @@ export default function LdapMapperDetails() {
     name: "providerId",
   });
 
-  const isNew = mapperId === "new";
-
   if (!components) {
     return <KeycloakSpinner />;
   }
 
+  const isNew = mapperId === "new";
+  const mapper = components.find((c) => c.id === mapperType);
   return (
     <>
       <DeleteConfirm />
       <ViewHeader
+        key={key}
         titleKey={mapping ? mapping.name! : t("common:createNewMapper")}
         dropdownItems={
           isNew
@@ -159,6 +181,24 @@ export default function LdapMapperDetails() {
                 <DropdownItem key="delete" onClick={toggleDeleteDialog}>
                   {t("common:delete")}
                 </DropdownItem>,
+                mapper?.metadata.fedToKeycloakSyncSupported && (
+                  <DropdownItem
+                    key="fedSync"
+                    onClick={() => sync("fedToKeycloak")}
+                  >
+                    {t("syncLDAPGroupsToKeycloak")}
+                  </DropdownItem>
+                ),
+                mapper?.metadata.keycloakToFedSyncSupported && (
+                  <DropdownItem
+                    key="ldapSync"
+                    onClick={() => {
+                      sync("keycloakToFed");
+                    }}
+                  >
+                    {t("syncKeycloakGroupsToLDAP")}
+                  </DropdownItem>
+                ),
               ]
         }
       />
@@ -284,11 +324,7 @@ export default function LdapMapperDetails() {
           )}
           <FormProvider {...form}>
             {!!mapperType && (
-              <DynamicComponents
+              <DynamicComponents properties={mapper?.properties!} />
-                properties={
-                  components.find((c) => c.id === mapperType)?.properties!
-                }
-              />
             )}
           </FormProvider>
         </FormAccess>

libs/keycloak-admin-client/src/resources/userStorageProvider.ts

@@ -3,7 +3,7 @@ import type SynchronizationResultRepresentation from "../defs/synchronizationRes
 import Resource from "./resource.js";
 
 type ActionType = "triggerFullSync" | "triggerChangedUsersSync";
-type DirectionType = "fedToKeycloak" | "keycloakToFed";
+export type DirectionType = "fedToKeycloak" | "keycloakToFed";
 type NameResponse = {
   id: string;
   name: string;