From 27d8b35d70a273dad40f7e358c2000583c0e88de Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 15 Nov 2022 09:57:06 -0500
Subject: [PATCH] Added sync period settings to custom UI (#3770)

---
 .../custom/CustomProviderSettings.tsx         |   3 +
 .../user-federation/custom/SyncSettings.tsx   | 124 ++++++++++++++++++
 2 files changed, 127 insertions(+)
 create mode 100644 apps/admin-ui/src/user-federation/custom/SyncSettings.tsx

diff --git a/apps/admin-ui/src/user-federation/custom/CustomProviderSettings.tsx b/apps/admin-ui/src/user-federation/custom/CustomProviderSettings.tsx
index 9a3391a484..0668f33fa4 100644
--- a/apps/admin-ui/src/user-federation/custom/CustomProviderSettings.tsx
+++ b/apps/admin-ui/src/user-federation/custom/CustomProviderSettings.tsx
@@ -25,6 +25,7 @@ import { ExtendedHeader } from "../shared/ExtendedHeader";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 import { convertFormValuesToObject, convertToFormValues } from "../../util";
+import { SyncSettings } from "./SyncSettings";
 
 import "./custom-provider-settings.css";
 
@@ -33,6 +34,7 @@ export default function CustomProviderSettings() {
   const { id, providerId } = useParams<ProviderRouteParams>();
   const navigate = useNavigate();
   const form = useForm<ComponentRepresentation>({
+    shouldUnregister: false,
     mode: "onChange",
   });
   const {
@@ -146,6 +148,7 @@ export default function CustomProviderSettings() {
           </FormGroup>
           <FormProvider {...form}>
             <DynamicComponents properties={provider?.properties || []} />
+            {provider?.metadata.synchronizable && <SyncSettings />}
           </FormProvider>
           <SettingsCache form={form} unWrap />
           <ActionGroup>
diff --git a/apps/admin-ui/src/user-federation/custom/SyncSettings.tsx b/apps/admin-ui/src/user-federation/custom/SyncSettings.tsx
new file mode 100644
index 0000000000..03ff5a1fae
--- /dev/null
+++ b/apps/admin-ui/src/user-federation/custom/SyncSettings.tsx
@@ -0,0 +1,124 @@
+import { useTranslation } from "react-i18next";
+import { Controller, useFormContext } from "react-hook-form";
+import { FormGroup, Switch } from "@patternfly/react-core";
+
+import { HelpItem } from "../../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
+
+export const SyncSettings = () => {
+  const { t } = useTranslation("user-federation");
+  const { control, register, watch } = useFormContext();
+  const watchPeriodicSync = watch("config.fullSyncPeriod", "-1");
+  const watchChangedSync = watch("config.changedSyncPeriod", "-1");
+
+  return (
+    <>
+      <FormGroup
+        label={t("periodicFullSync")}
+        labelIcon={
+          <HelpItem
+            helpText="user-federation-help:periodicFullSyncHelp"
+            fieldLabelId="user-federation:periodicFullSync"
+          />
+        }
+        fieldId="kc-periodic-full-sync"
+        hasNoPaddingTop
+      >
+        <Controller
+          name="config.fullSyncPeriod"
+          defaultValue="-1"
+          control={control}
+          render={({ onChange, value }) => (
+            <Switch
+              id="kc-periodic-full-sync"
+              data-testid="periodic-full-sync"
+              onChange={(value) => {
+                onChange(value ? "604800" : "-1");
+              }}
+              isChecked={value !== "-1"}
+              label={t("common:on")}
+              labelOff={t("common:off")}
+              aria-label={t("periodicFullSync")}
+            />
+          )}
+        />
+      </FormGroup>
+      {watchPeriodicSync !== "-1" && (
+        <FormGroup
+          hasNoPaddingTop
+          label={t("fullSyncPeriod")}
+          labelIcon={
+            <HelpItem
+              helpText="user-federation-help:fullSyncPeriodHelp"
+              fieldLabelId="user-federation:fullSyncPeriod"
+            />
+          }
+          fieldId="kc-full-sync-period"
+        >
+          <KeycloakTextInput
+            type="number"
+            min={-1}
+            defaultValue="604800"
+            id="kc-full-sync-period"
+            data-testid="full-sync-period"
+            name="config.fullSyncPeriod"
+            ref={register}
+          />
+        </FormGroup>
+      )}
+      <FormGroup
+        label={t("periodicChangedUsersSync")}
+        labelIcon={
+          <HelpItem
+            helpText="user-federation-help:periodicChangedUsersSyncHelp"
+            fieldLabelId="user-federation:periodicChangedUsersSync"
+          />
+        }
+        fieldId="kc-periodic-changed-users-sync"
+        hasNoPaddingTop
+      >
+        <Controller
+          name="config.changedSyncPeriod"
+          defaultValue="-1"
+          control={control}
+          render={({ onChange, value }) => (
+            <Switch
+              id="kc-periodic-changed-users-sync"
+              data-testid="periodic-changed-users-sync"
+              onChange={(value) => {
+                onChange(value ? "86400" : "-1");
+              }}
+              isChecked={value !== "-1"}
+              label={t("common:on")}
+              labelOff={t("common:off")}
+              aria-label={t("periodicChangedUsersSync")}
+            />
+          )}
+        />
+      </FormGroup>
+      {watchChangedSync !== "-1" && (
+        <FormGroup
+          label={t("changedUsersSyncPeriod")}
+          labelIcon={
+            <HelpItem
+              helpText="user-federation-help:changedUsersSyncHelp"
+              fieldLabelId="user-federation:changedUsersSyncPeriod"
+            />
+          }
+          fieldId="kc-changed-users-sync-period"
+          hasNoPaddingTop
+        >
+          <KeycloakTextInput
+            type="number"
+            min={-1}
+            defaultValue="86400"
+            id="kc-changed-users-sync-period"
+            data-testid="changed-users-sync-period"
+            name="config.changedSyncPeriod"
+            ref={register}
+          />
+        </FormGroup>
+      )}
+    </>
+  );
+};