add sync toggles with text fields

src/user-federation/UserFederationLdapSettings.tsx

@@ -194,6 +194,16 @@ export const UserFederationLdapSettings = () => {
   const setupForm = (component: ComponentRepresentation) => {
     Object.entries(component).map((entry) => {
       if (entry[0] === "config") {
+        form.setValue(
+          "config.periodicChangedUsersSync",
+          entry[1].changedSyncPeriod[0] !== "-1"
+        );
+
+        form.setValue(
+          "config.periodicFullSync",
+          entry[1].fullSyncPeriod[0] !== "-1"
+        );
+
         convertToFormValues(entry[1], "config", form.setValue);
       }
       form.setValue(entry[0], entry[1]);
@@ -212,6 +222,18 @@ export const UserFederationLdapSettings = () => {
   };
 
   const save = async (component: ComponentRepresentation) => {
+    if (component?.config?.periodicChangedUsersSync !== null) {
+      if (component?.config?.periodicChangedUsersSync === false) {
+        component.config.changedSyncPeriod = ["-1"];
+      }
+      delete component?.config?.periodicChangedUsersSync;
+    }
+    if (component?.config?.periodicFullSync !== null) {
+      if (component?.config?.periodicFullSync === false) {
+        component.config.fullSyncPeriod = ["-1"];
+      }
+      delete component?.config?.periodicFullSync;
+    }
     try {
       if (!id) {
         await adminClient.components.create(component);

src/user-federation/ldap/LdapSettingsSynchronization.tsx

@@ -20,6 +20,9 @@ export const LdapSettingsSynchronization = ({
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
+  const watchPeriodicSync = form.watch("config.periodicFullSync", false);
+  const watchChangedSync = form.watch("config.periodicChangedUsersSync", false);
+  
   return (
     <>
       {showSectionHeading && (
@@ -78,8 +81,36 @@ export const LdapSettingsSynchronization = ({
             ref={form.register}
           />
         </FormGroup>
-
+        <FormGroup
-        {/* Enter -1 to switch off, otherwise enter value */}
+          label={"Periodic full sync"}
+          labelIcon={
+            <HelpItem
+              helpText={helpText("periodicFullSyncHelp")}
+              forLabel={"periodicFullSync"}
+              forID="kc-periodic-full-sync"
+            />
+          }
+          fieldId="kc-periodic-full-sync"
+          hasNoPaddingTop
+        >
+          <Controller
+            name="config.periodicFullSync"
+            defaultValue={false}
+            control={form.control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-periodic-full-sync"}
+                isDisabled={false}
+                onChange={(value) => onChange(value)}
+                isChecked={value === true}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+                ref={form.register}
+              />
+            )}
+          ></Controller>
+        </FormGroup>
+        {watchPeriodicSync && (
           <FormGroup
             hasNoPaddingTop
             label={t("fullSyncPeriod")}
@@ -95,13 +126,43 @@ export const LdapSettingsSynchronization = ({
             <TextInput
               type="number"
               min={-1}
+              defaultValue={604800}
               id="kc-full-sync-period"
               name="config.fullSyncPeriod[0]"
               ref={form.register}
             />
           </FormGroup>
-
+        )}
-        {/* Enter -1 to switch off, otherwise enter value */}
+        <FormGroup
+          label={"Periodic Changed Users Sync"}
+          labelIcon={
+            <HelpItem
+              helpText={helpText("periodicChangedUsersSyncHelp")}
+              forLabel={"periodicChangedUsersSync"}
+              forID="kc-periodic-changed-users-sync"
+            />
+          }
+          fieldId="kc-periodic-changed-users-sync"
+          hasNoPaddingTop
+        >
+          <Controller
+            name="config.periodicChangedUsersSync"
+            defaultValue={false}
+            control={form.control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-periodic-changed-users-sync"}
+                isDisabled={false}
+                onChange={(value) => onChange(value)}
+                isChecked={value === true}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+                ref={form.register}
+              />
+            )}
+          ></Controller>
+        </FormGroup>
+        {watchChangedSync && (
           <FormGroup
             label={t("changedUsersSyncPeriod")}
             labelIcon={
@@ -117,11 +178,13 @@ export const LdapSettingsSynchronization = ({
             <TextInput
               type="number"
               min={-1}
+              defaultValue={86400}
               id="kc-changed-users-sync-period"
               name="config.changedSyncPeriod[0]"
               ref={form.register}
             />
           </FormGroup>
+        )}
       </FormAccess>
     </>
   );