Kerberos and LDAP settings: Change hour and minute format to match old admin console UI (#353)

* change hour minute fmt to match old ui

* rm required max lifespan

* fix day of week default value

* create one shared cache settings component

* fix eslint and tests

* rm obsolete separate cache components

* try fixed snap

src/user-federation/UserFederationKerberosSettings.tsx

@@ -10,7 +10,7 @@ import {
 } from "@patternfly/react-core";
 
 import { KerberosSettingsRequired } from "./kerberos/KerberosSettingsRequired";
-import { KerberosSettingsCache } from "./kerberos/KerberosSettingsCache";
+import { SettingsCache } from "./shared/SettingsCache";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { convertToFormValues } from "../util";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
@@ -150,7 +150,7 @@ export const UserFederationKerberosSettings = () => {
         <KerberosSettingsRequired form={form} showSectionHeading />
       </PageSection>
       <PageSection variant="light" isFilled>
-        <KerberosSettingsCache form={form} showSectionHeading />
+        <SettingsCache form={form} showSectionHeading />
         <Form onSubmit={form.handleSubmit(save)}>
           <ActionGroup>
             <Button variant="primary" type="submit">

src/user-federation/UserFederationKerberosWizard.tsx

@@ -2,7 +2,7 @@ import { Wizard } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { KerberosSettingsRequired } from "./kerberos/KerberosSettingsRequired";
-import { KerberosSettingsCache } from "./kerberos/KerberosSettingsCache";
+import { SettingsCache } from "./shared/SettingsCache";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { useForm } from "react-hook-form";
 
@@ -24,11 +24,7 @@ export const UserFederationKerberosWizard = () => {
     {
       name: t("cacheSettings"),
       component: (
-        <KerberosSettingsCache
-          form={form}
-          showSectionHeading
-          showSectionDescription
-        />
+        <SettingsCache form={form} showSectionHeading showSectionDescription />
       ),
       nextButtonText: t("common:finish"), // TODO: needs to disable until cache policy is valid
     },

src/user-federation/UserFederationLdapSettings.tsx

@@ -12,7 +12,7 @@ import {
 
 import { LdapSettingsAdvanced } from "./ldap/LdapSettingsAdvanced";
 import { LdapSettingsKerberosIntegration } from "./ldap/LdapSettingsKerberosIntegration";
-import { LdapSettingsCache } from "./ldap/LdapSettingsCache";
+import { SettingsCache } from "./shared/SettingsCache";
 import { LdapSettingsSynchronization } from "./ldap/LdapSettingsSynchronization";
 import { LdapSettingsGeneral } from "./ldap/LdapSettingsGeneral";
 import { LdapSettingsConnection } from "./ldap/LdapSettingsConnection";
@@ -208,7 +208,7 @@ export const UserFederationLdapSettings = () => {
           <LdapSettingsSearching form={form} />
           <LdapSettingsSynchronization form={form} />
           <LdapSettingsKerberosIntegration form={form} />
-          <LdapSettingsCache form={form} />
+          <SettingsCache form={form} />
           <LdapSettingsAdvanced form={form} />
         </ScrollForm>
         <Form onSubmit={form.handleSubmit(save)}>

src/user-federation/UserFederationLdapWizard.tsx

@@ -10,7 +10,7 @@ import { LdapSettingsConnection } from "./ldap/LdapSettingsConnection";
 import { LdapSettingsSearching } from "./ldap/LdapSettingsSearching";
 import { LdapSettingsSynchronization } from "./ldap/LdapSettingsSynchronization";
 import { LdapSettingsKerberosIntegration } from "./ldap/LdapSettingsKerberosIntegration";
-import { LdapSettingsCache } from "./ldap/LdapSettingsCache";
+import { SettingsCache } from "./shared/SettingsCache";
 import { LdapSettingsAdvanced } from "./ldap/LdapSettingsAdvanced";
 import { useTranslation } from "react-i18next";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
@@ -81,11 +81,7 @@ export const UserFederationLdapWizard = () => {
       name: t("cacheSettings"),
       id: "ldapCacheSettingsStep",
       component: (
-        <LdapSettingsCache
-          form={form}
-          showSectionHeading
-          showSectionDescription
-        />
+        <SettingsCache form={form} showSectionHeading showSectionDescription />
       ),
     },
     {

src/user-federation/help.json

@@ -41,7 +41,7 @@
     "allowKerberosAuthenticationHelp": "Enable/disable HTTP authentication of users with SPNEGO/Kerberos tokens. The data about authenticated users will be provisioned from this LDAP server.",
     "useKerberosForPasswordAuthenticationHelp": "User Kerberos login module for authenticating username/password against Kerberos server instead of authenticating against LDAP server with Directory Service API",
 
-    "ldapCacheSettingsDescription": "This section contains options useful for caching users, which were loaded from this user storage provider.",
+    "cacheSettingsDescription": "This section contains options useful for caching users, which were loaded from this user storage provider.",
     "cachePolicyHelp": "Cache Policy for this storage provider. 'DEFAULT' is whatever the default settings are for the global cache. 'EVICT_DAILY' is a time of day every day that the cache will be invalidated. 'EVICT_WEEKLY' is a day of the week and time the cache will be invalidated. 'MAX_LIFESPAN' is the time in milliseconds that will be the lifespan of a cache entry.",
     "evictionDayHelp": "Day of the week the entry will become invalid",
     "evictionHourHelp": "Hour of the day the entry will become invalid",
@@ -66,8 +66,6 @@
     "editModeKerberosHelp": "READ_ONLY means that password updates are not allowed and user always authenticates with Kerberos password. UNSYNCED means that the user can change the password in the Keycloak database and this one will be used instead of the Kerberos password.",
     "updateFirstLoginHelp": "Update profile on first login",
 
-    "kerberosCacheSettingsDescription": "This section contains a few basic options common to all user storage providers.",
-
     "nameHelp": "Name of the mapper",
     "mapperTypeHelp": "",
 

src/user-federation/kerberos/KerberosSettingsCache.tsx

@@ -1,281 +0,0 @@
-import {
-  FormGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-  TextInput,
-} from "@patternfly/react-core";
-import { useTranslation } from "react-i18next";
-import { HelpItem } from "../../components/help-enabler/HelpItem";
-import React, { useState } from "react";
-import { UseFormMethods, Controller, useWatch } from "react-hook-form";
-import { FormAccess } from "../../components/form-access/FormAccess";
-import _ from "lodash";
-import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
-
-export type KerberosSettingsCacheProps = {
-  form: UseFormMethods;
-  showSectionHeading?: boolean;
-  showSectionDescription?: boolean;
-};
-
-export const KerberosSettingsCache = ({
-  form,
-  showSectionHeading = false,
-  showSectionDescription = false,
-}: KerberosSettingsCacheProps) => {
-  const { t } = useTranslation("user-federation");
-  const helpText = useTranslation("user-federation-help").t;
-
-  const cachePolicyType = useWatch({
-    control: form.control,
-    name: "config.cachePolicy",
-  });
-
-  const [isCachePolicyDropdownOpen, setIsCachePolicyDropdownOpen] = useState(
-    false
-  );
-  const [isEvictionHourDropdownOpen, setIsEvictionHourDropdownOpen] = useState(
-    false
-  );
-  const [
-    isEvictionMinuteDropdownOpen,
-    setIsEvictionMinuteDropdownOpen,
-  ] = useState(false);
-  const [isEvictionDayDropdownOpen, setIsEvictionDayDropdownOpen] = useState(
-    false
-  );
-
-  const hourOptions = [<SelectOption key={0} value={[`${1}`]} isPlaceholder />];
-  for (let index = 2; index <= 24; index++) {
-    hourOptions.push(<SelectOption key={index - 1} value={[`${index}`]} />);
-  }
-
-  const minuteOptions = [
-    <SelectOption key={0} value={[`${1}`]} isPlaceholder />,
-  ];
-  for (let index = 2; index <= 60; index++) {
-    minuteOptions.push(<SelectOption key={index - 1} value={[`${index}`]} />);
-  }
-
-  return (
-    <>
-      {showSectionHeading && (
-        <WizardSectionHeader
-          title={t("cacheSettings")}
-          description={helpText("kerberosCacheSettingsDescription")}
-          showDescription={showSectionDescription}
-        />
-      )}
-
-      {/* Cache settings */}
-      <FormAccess role="manage-realm" isHorizontal>
-        <FormGroup
-          label={t("cachePolicy")}
-          labelIcon={
-            <HelpItem
-              helpText={helpText("cachePolicyHelp")}
-              forLabel={t("cachePolicy")}
-              forID="kc-cache-policy"
-            />
-          }
-          fieldId="kc-cache-policy"
-        >
-          <Controller
-            name="config.cachePolicy"
-            defaultValue={["DEFAULT"]}
-            control={form.control}
-            render={({ onChange, value }) => (
-              <Select
-                toggleId="kc-cache-policy"
-                required
-                onToggle={() =>
-                  setIsCachePolicyDropdownOpen(!isCachePolicyDropdownOpen)
-                }
-                isOpen={isCachePolicyDropdownOpen}
-                onSelect={(_, value) => {
-                  onChange(value as string);
-                  setIsCachePolicyDropdownOpen(false);
-                }}
-                selections={value}
-                variant={SelectVariant.single}
-              >
-                <SelectOption key={0} value={["DEFAULT"]} isPlaceholder />
-                <SelectOption key={1} value={["EVICT_DAILY"]} />
-                <SelectOption key={2} value={["EVICT_WEEKLY"]} />
-                <SelectOption key={3} value={["MAX_LIFESPAN"]} />
-                <SelectOption key={4} value={["NO_CACHE"]} />
-              </Select>
-            )}
-          ></Controller>
-        </FormGroup>
-
-        {_.isEqual(cachePolicyType, ["EVICT_WEEKLY"]) ? (
-          <FormGroup
-            label={t("evictionDay")}
-            labelIcon={
-              <HelpItem
-                helpText={helpText("evictionDayHelp")}
-                forLabel={t("evictionDay")}
-                forID="kc-eviction-day"
-              />
-            }
-            isRequired
-            fieldId="kc-eviction-day"
-          >
-            <Controller
-              name="config.evictionDay"
-              defaultValue={[t("common:Sunday")]}
-              control={form.control}
-              render={({ onChange, value }) => (
-                <Select
-                  toggleId="kc-eviction-day"
-                  required
-                  onToggle={() =>
-                    setIsEvictionDayDropdownOpen(!isEvictionDayDropdownOpen)
-                  }
-                  isOpen={isEvictionDayDropdownOpen}
-                  onSelect={(_, value) => {
-                    onChange(value as string);
-                    setIsEvictionDayDropdownOpen(false);
-                  }}
-                  selections={value}
-                  variant={SelectVariant.single}
-                >
-                  <SelectOption key={0} value={["1"]} isPlaceholder>
-                    {t("common:Sunday")}
-                  </SelectOption>
-                  <SelectOption key={1} value={["2"]}>
-                    {t("common:Monday")}
-                  </SelectOption>
-                  <SelectOption key={2} value={["3"]}>
-                    {t("common:Tuesday")}
-                  </SelectOption>
-                  <SelectOption key={3} value={["4"]}>
-                    {t("common:Wednesday")}
-                  </SelectOption>
-                  <SelectOption key={4} value={["5"]}>
-                    {t("common:Thursday")}
-                  </SelectOption>
-                  <SelectOption key={5} value={["6"]}>
-                    {t("common:Friday")}
-                  </SelectOption>
-                  <SelectOption key={6} value={["7"]}>
-                    {t("common:Saturday")}
-                  </SelectOption>
-                </Select>
-              )}
-            ></Controller>
-          </FormGroup>
-        ) : (
-          <></>
-        )}
-
-        {_.isEqual(cachePolicyType, ["EVICT_DAILY"]) ||
-        _.isEqual(cachePolicyType, ["EVICT_WEEKLY"]) ? (
-          <>
-            <FormGroup
-              label={t("evictionHour")}
-              labelIcon={
-                <HelpItem
-                  helpText={helpText("evictionHourHelp")}
-                  forLabel={t("evictionHour")}
-                  forID="kc-eviction-hour"
-                />
-              }
-              isRequired
-              fieldId="kc-eviction-hour"
-            >
-              <Controller
-                name="config.evictionHour"
-                defaultValue={["1"]}
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <Select
-                    toggleId="kc-eviction-hour"
-                    onToggle={() =>
-                      setIsEvictionHourDropdownOpen(!isEvictionHourDropdownOpen)
-                    }
-                    isOpen={isEvictionHourDropdownOpen}
-                    onSelect={(_, value) => {
-                      onChange(value as string);
-                      setIsEvictionHourDropdownOpen(false);
-                    }}
-                    selections={value}
-                    variant={SelectVariant.single}
-                  >
-                    {hourOptions}
-                  </Select>
-                )}
-              ></Controller>
-            </FormGroup>
-
-            <FormGroup
-              label={t("evictionMinute")}
-              labelIcon={
-                <HelpItem
-                  helpText={helpText("evictionMinuteHelp")}
-                  forLabel={t("evictionMinute")}
-                  forID="kc-eviction-minute"
-                />
-              }
-              isRequired
-              fieldId="kc-eviction-minute"
-            >
-              <Controller
-                name="config.evictionMinute"
-                defaultValue={["1"]}
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <Select
-                    toggleId="kc-eviction-minute"
-                    onToggle={() =>
-                      setIsEvictionMinuteDropdownOpen(
-                        !isEvictionMinuteDropdownOpen
-                      )
-                    }
-                    isOpen={isEvictionMinuteDropdownOpen}
-                    onSelect={(_, value) => {
-                      onChange(value as string);
-                      setIsEvictionMinuteDropdownOpen(false);
-                    }}
-                    selections={value}
-                    variant={SelectVariant.single}
-                  >
-                    {minuteOptions}
-                  </Select>
-                )}
-              ></Controller>
-            </FormGroup>
-          </>
-        ) : (
-          <></>
-        )}
-        {_.isEqual(cachePolicyType, ["MAX_LIFESPAN"]) ? (
-          <FormGroup
-            label={t("maxLifespan")}
-            labelIcon={
-              <HelpItem
-                helpText={helpText("maxLifespanHelp")}
-                forLabel={t("maxLifespan")}
-                forID="kc-max-lifespan"
-              />
-            }
-            isRequired
-            fieldId="kc-max-lifespan"
-          >
-            <TextInput
-              isRequired
-              type="text"
-              id="kc-max-lifespan"
-              name="config.maxLifespan[0]"
-              ref={form.register}
-            />
-          </FormGroup>
-        ) : (
-          <></>
-        )}
-      </FormAccess>
-    </>
-  );
-};

src/user-federation/shared/SettingsCache.tsx

@@ -13,17 +13,17 @@ import { FormAccess } from "../../components/form-access/FormAccess";
 import _ from "lodash";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 
-export type LdapSettingsCacheProps = {
+export type SettingsCacheProps = {
   form: UseFormMethods;
   showSectionHeading?: boolean;
   showSectionDescription?: boolean;
 };
 
-export const LdapSettingsCache = ({
+export const SettingsCache = ({
   form,
   showSectionHeading = false,
   showSectionDescription = false,
-}: LdapSettingsCacheProps) => {
+}: SettingsCacheProps) => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
@@ -49,16 +49,42 @@ export const LdapSettingsCache = ({
     false
   );
 
-  const hourOptions = [<SelectOption key={0} value={[`${1}`]} isPlaceholder />];
-  for (let index = 2; index <= 24; index++) {
-    hourOptions.push(<SelectOption key={index - 1} value={[`${index}`]} />);
+  const hourOptions = [
+    <SelectOption key={0} value={[`${0}`]} isPlaceholder>
+      {[`0${0}`]}
+    </SelectOption>,
+  ];
+  let hourDisplay = "";
+  for (let index = 1; index < 24; index++) {
+    if (index < 10) {
+      hourDisplay = `0${index}`;
+    } else {
+      hourDisplay = `${index}`;
+    }
+    hourOptions.push(
+      <SelectOption key={index} value={[`${index}`]}>
+        {hourDisplay}
+      </SelectOption>
+    );
   }
 
   const minuteOptions = [
-    <SelectOption key={0} value={[`${1}`]} isPlaceholder />,
+    <SelectOption key={0} value={[`${0}`]} isPlaceholder>
+      {[`0${0}`]}
+    </SelectOption>,
   ];
-  for (let index = 2; index <= 60; index++) {
-    minuteOptions.push(<SelectOption key={index - 1} value={[`${index}`]} />);
+  let minuteDisplay = "";
+  for (let index = 1; index < 60; index++) {
+    if (index < 10) {
+      minuteDisplay = `0${index}`;
+    } else {
+      minuteDisplay = `${index}`;
+    }
+    minuteOptions.push(
+      <SelectOption key={index} value={[`${index}`]}>
+        {minuteDisplay}
+      </SelectOption>
+    );
   }
 
   return (
@@ -66,7 +92,7 @@ export const LdapSettingsCache = ({
       {showSectionHeading && (
         <WizardSectionHeader
           title={t("cacheSettings")}
-          description={helpText("ldapCacheSettingsDescription")}
+          description={helpText("cacheSettingsDescription")}
           showDescription={showSectionDescription}
         />
       )}
@@ -124,8 +150,8 @@ export const LdapSettingsCache = ({
             fieldId="kc-eviction-day"
           >
             <Controller
-              name="config.evictionDay"
-              defaultValue={[t("common:Sunday")]}
+              name="config.evictionDay[0]"
+              defaultValue={"1"}
               control={form.control}
               render={({ onChange, value }) => (
                 <Select
@@ -142,25 +168,25 @@ export const LdapSettingsCache = ({
                   selections={value}
                   variant={SelectVariant.single}
                 >
-                  <SelectOption key={0} value={["1"]} isPlaceholder>
+                  <SelectOption key={0} value="1" isPlaceholder>
                     {t("common:Sunday")}
                   </SelectOption>
-                  <SelectOption key={1} value={["2"]}>
+                  <SelectOption key={1} value="2">
                     {t("common:Monday")}
                   </SelectOption>
-                  <SelectOption key={2} value={["3"]}>
+                  <SelectOption key={2} value="3">
                     {t("common:Tuesday")}
                   </SelectOption>
-                  <SelectOption key={3} value={["4"]}>
+                  <SelectOption key={3} value="4">
                     {t("common:Wednesday")}
                   </SelectOption>
-                  <SelectOption key={4} value={["5"]}>
+                  <SelectOption key={4} value="5">
                     {t("common:Thursday")}
                   </SelectOption>
-                  <SelectOption key={5} value={["6"]}>
+                  <SelectOption key={5} value="6">
                     {t("common:Friday")}
                   </SelectOption>
-                  <SelectOption key={6} value={["7"]}>
+                  <SelectOption key={6} value="7">
                     {t("common:Saturday")}
                   </SelectOption>
                 </Select>
@@ -187,7 +213,7 @@ export const LdapSettingsCache = ({
             >
               <Controller
                 name="config.evictionHour"
-                defaultValue={["1"]}
+                defaultValue={["0"]}
                 control={form.control}
                 render={({ onChange, value }) => (
                   <Select
@@ -222,7 +248,7 @@ export const LdapSettingsCache = ({
             >
               <Controller
                 name="config.evictionMinute"
-                defaultValue={["1"]}
+                defaultValue={["0"]}
                 control={form.control}
                 render={({ onChange, value }) => (
                   <Select
@@ -262,7 +288,6 @@ export const LdapSettingsCache = ({
             fieldId="kc-max-lifespan"
           >
             <TextInput
-              isRequired
               type="text"
               id="kc-max-lifespan"
               name="config.maxLifespan[0]"