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,50 +81,110 @@ export const LdapSettingsSynchronization = ({
             ref={form.register}
           />
         </FormGroup>
-
-        {/* Enter -1 to switch off, otherwise enter value */}
         <FormGroup
-          hasNoPaddingTop
+          label={"Periodic full sync"}
-          label={t("fullSyncPeriod")}
           labelIcon={
             <HelpItem
-              helpText={helpText("fullSyncPeriodHelp")}
+              helpText={helpText("periodicFullSyncHelp")}
-              forLabel={t("fullSyncPeriod")}
+              forLabel={"periodicFullSync"}
-              forID="kc-full-sync-period"
+              forID="kc-periodic-full-sync"
             />
           }
-          fieldId="kc-full-sync-period"
+          fieldId="kc-periodic-full-sync"
-        >
-          <TextInput
-            type="number"
-            min={-1}
-            id="kc-full-sync-period"
-            name="config.fullSyncPeriod[0]"
-            ref={form.register}
-          />
-        </FormGroup>
-
-        {/* Enter -1 to switch off, otherwise enter value */}
-        <FormGroup
-          label={t("changedUsersSyncPeriod")}
-          labelIcon={
-            <HelpItem
-              helpText={helpText("changedUsersSyncHelp")}
-              forLabel={t("changedUsersSyncPeriod")}
-              forID="kc-changed-users-sync-period"
-            />
-          }
-          fieldId="kc-changed-users-sync-period"
           hasNoPaddingTop
         >
-          <TextInput
+          <Controller
-            type="number"
+            name="config.periodicFullSync"
-            min={-1}
+            defaultValue={false}
-            id="kc-changed-users-sync-period"
+            control={form.control}
-            name="config.changedSyncPeriod[0]"
+            render={({ onChange, value }) => (
-            ref={form.register}
+              <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")}
+            labelIcon={
+              <HelpItem
+                helpText={helpText("fullSyncPeriodHelp")}
+                forLabel={t("fullSyncPeriod")}
+                forID="kc-full-sync-period"
+              />
+            }
+            fieldId="kc-full-sync-period"
+          >
+            <TextInput
+              type="number"
+              min={-1}
+              defaultValue={604800}
+              id="kc-full-sync-period"
+              name="config.fullSyncPeriod[0]"
+              ref={form.register}
+            />
+          </FormGroup>
+        )}
+        <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={
+              <HelpItem
+                helpText={helpText("changedUsersSyncHelp")}
+                forLabel={t("changedUsersSyncPeriod")}
+                forID="kc-changed-users-sync-period"
+              />
+            }
+            fieldId="kc-changed-users-sync-period"
+            hasNoPaddingTop
+          >
+            <TextInput
+              type="number"
+              min={-1}
+              defaultValue={86400}
+              id="kc-changed-users-sync-period"
+              name="config.changedSyncPeriod[0]"
+              ref={form.register}
+            />
+          </FormGroup>
+        )}
       </FormAccess>
     </>
   );