Show/hide Kerberos cache policy related controls (#267)

* preliminary usewatch changes

* show hide working

* fix switches with form access

* make auth-pw control edit mode

src/user-federation/kerberos/KerberosSettingsCache.tsx

@@ -8,12 +8,13 @@ import {
 import { useTranslation } from "react-i18next";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import React, { useEffect, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
 import { convertToFormValues } from "../../util";
+import { useForm, Controller, useWatch } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
+import _ from "lodash";
 
 export const KerberosSettingsCache = () => {
   const { t } = useTranslation("user-federation");
@@ -23,37 +24,16 @@ export const KerberosSettingsCache = () => {
   const { register, control, setValue } = useForm<ComponentRepresentation>();
   const { id } = useParams<{ id: string }>();
 
-  const convertToDays = (num: string) => {
-    switch (num) {
-      case "1":
-        return t("common:Sunday");
-      case "2":
-        return t("common:Monday");
-      case "3":
-        return t("common:Tuesday");
-      case "4":
-        return t("common:Wednesday");
-      case "5":
-        return t("common:Thursday");
-      case "6":
-        return t("common:Friday");
-      case "7":
-        return t("common:Saturday");
-      default:
-        return t("common:selectOne");
-    }
-  };
+  const cachePolicyType = useWatch({
+    control: control,
+    name: "config.cachePolicy",
+  });
 
   const setupForm = (component: ComponentRepresentation) => {
     Object.entries(component).map((entry) => {
+      setValue("config.cachePolicy", component.config?.cachePolicy);
       if (entry[0] === "config") {
         convertToFormValues(entry[1], "config", setValue);
-        if (entry[1].evictionDay) {
-          setValue(
-            "config.evictionDay",
-            convertToDays(entry[1].evictionDay[0])
-          );
-        }
       } else {
         setValue(entry[0], entry[1]);
       }
@@ -87,14 +67,14 @@ export const KerberosSettingsCache = () => {
     <SelectOption key={0} value={t("common:selectOne")} isPlaceholder />,
   ];
   for (let index = 1; index <= 24; index++) {
-    hourOptions.push(<SelectOption key={index + 1} value={index} />);
+    hourOptions.push(<SelectOption key={index + 1} value={[`${index}`]} />);
   }
 
   const minuteOptions = [
     <SelectOption key={0} value={t("common:selectOne")} isPlaceholder />,
   ];
   for (let index = 1; index <= 60; index++) {
-    minuteOptions.push(<SelectOption key={index + 1} value={index} />);
+    minuteOptions.push(<SelectOption key={index + 1} value={[`${index}`]} />);
   }
 
   return (
@@ -136,150 +116,182 @@ export const KerberosSettingsCache = () => {
                   value={t("common:selectOne")}
                   isPlaceholder
                 />
-                <SelectOption key={1} value="DEFAULT" />
-                <SelectOption key={2} value="EVICT_DAILY" />
-                <SelectOption key={3} value="EVICT_WEEKLY" />
-                <SelectOption key={4} value="MAX_LIFESPAN" />
-                <SelectOption key={5} value="NO_CACHE" />
+                <SelectOption key={1} value={["DEFAULT"]} />
+                <SelectOption key={2} value={["EVICT_DAILY"]} />
+                <SelectOption key={3} value={["EVICT_WEEKLY"]} />
+                <SelectOption key={4} value={["MAX_LIFESPAN"]} />
+                <SelectOption key={5} value={["NO_CACHE"]} />
               </Select>
             )}
           ></Controller>
         </FormGroup>
-        <FormGroup
-          label={t("evictionDay")}
-          labelIcon={
-            <HelpItem
-              helpText={helpText("evictionDayHelp")}
-              forLabel={t("evictionDay")}
-              forID="kc-eviction-day"
-            />
-          }
-          fieldId="kc-eviction-day"
-        >
-          <Controller
-            name="config.evictionDay"
-            defaultValue=""
-            control={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={t("common:selectOne")}
-                  isPlaceholder
+
+        {_.isEqual(cachePolicyType, ["EVICT_WEEKLY"]) ? (
+          <FormGroup
+            label={t("evictionDay")}
+            labelIcon={
+              <HelpItem
+                helpText={helpText("evictionDayHelp")}
+                forLabel={t("evictionDay")}
+                forID="kc-eviction-day"
+              />
+            }
+            fieldId="kc-eviction-day"
+          >
+            <Controller
+              name="config.evictionDay"
+              defaultValue=""
+              control={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={t("common:selectOne")}
+                    isPlaceholder
+                  />
+                  <SelectOption key={1} value={["1"]}>
+                    {t("common:Sunday")}
+                  </SelectOption>
+                  <SelectOption key={2} value={["2"]}>
+                    {t("common:Monday")}
+                  </SelectOption>
+                  <SelectOption key={3} value={["3"]}>
+                    {t("common:Tuesday")}
+                  </SelectOption>
+                  <SelectOption key={4} value={["4"]}>
+                    {t("common:Wednesday")}
+                  </SelectOption>
+                  <SelectOption key={5} value={["5"]}>
+                    {t("common:Thursday")}
+                  </SelectOption>
+                  <SelectOption key={6} value={["6"]}>
+                    {t("common:Friday")}
+                  </SelectOption>
+                  <SelectOption key={7} 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"
                 />
-                <SelectOption key={1} value={t("common:Sunday")} />
-                <SelectOption key={2} value={t("common:Monday")} />
-                <SelectOption key={3} value={t("common:Tuesday")} />
-                <SelectOption key={4} value={t("common:Wednesday")} />
-                <SelectOption key={5} value={t("common:Thursday")} />
-                <SelectOption key={6} value={t("common:Friday")} />
-                <SelectOption key={7} value={t("common:Saturday")} />
-              </Select>
-            )}
-          ></Controller>
-        </FormGroup>
-        {/* TODO: Investigate whether this should be a number field instead of a dropdown/text field */}
-        <FormGroup
-          label={t("evictionHour")}
-          labelIcon={
-            <HelpItem
-              helpText={helpText("evictionHourHelp")}
-              forLabel={t("evictionHour")}
-              forID="kc-eviction-hour"
+              }
+              fieldId="kc-eviction-hour"
+            >
+              <Controller
+                name="config.evictionHour"
+                defaultValue=""
+                control={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"
+                />
+              }
+              fieldId="kc-eviction-minute"
+            >
+              <Controller
+                name="config.evictionMinute"
+                defaultValue=""
+                control={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"
+              />
+            }
+            fieldId="kc-max-lifespan"
+          >
+            <TextInput
+              isRequired
+              type="text"
+              id="kc-max-lifespan"
+              name="config.maxLifespan"
+              ref={register}
             />
-          }
-          fieldId="kc-eviction-hour"
-        >
-          <Controller
-            name="config.evictionHour"
-            defaultValue=""
-            control={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>
-        {/* TODO: Investigate whether this should be a number field instead of a dropdown/text field */}
-        <FormGroup
-          label={t("evictionMinute")}
-          labelIcon={
-            <HelpItem
-              helpText={helpText("evictionMinuteHelp")}
-              forLabel={t("evictionMinute")}
-              forID="kc-eviction-minute"
-            />
-          }
-          fieldId="kc-eviction-minute"
-        >
-          <Controller
-            name="config.evictionMinute"
-            defaultValue=""
-            control={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>
-        <FormGroup
-          label={t("maxLifespan")}
-          labelIcon={
-            <HelpItem
-              helpText={helpText("maxLifespanHelp")}
-              forLabel={t("maxLifespan")}
-              forID="kc-max-lifespan"
-            />
-          }
-          fieldId="kc-max-lifespan"
-        >
-          <TextInput
-            isRequired
-            type="text"
-            id="kc-max-lifespan"
-            name="config.maxLifespan"
-            ref={register}
-          />
-        </FormGroup>
+          </FormGroup>
+        ) : (
+          <></>
+        )}
       </FormAccess>
     </>
   );

src/user-federation/kerberos/KerberosSettingsRequired.tsx

@@ -9,12 +9,13 @@ import {
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, Controller, useWatch } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
 import { convertToFormValues } from "../../util";
+import _ from "lodash";
 
 export const KerberosSettingsRequired = () => {
   const { t } = useTranslation("user-federation");
@@ -24,8 +25,17 @@ export const KerberosSettingsRequired = () => {
   const { register, control, setValue } = useForm<ComponentRepresentation>();
   const { id } = useParams<{ id: string }>();
 
+  const allowPassAuth = useWatch({
+    control: control,
+    name: "config.allowPasswordAuthentication",
+  });
+
   const setupForm = (component: ComponentRepresentation) => {
     Object.entries(component).map((entry) => {
+      setValue(
+        "config.allowPasswordAuthentication",
+        component.config?.allowPasswordAuthentication
+      );
       if (entry[0] === "config") {
         convertToFormValues(entry[1], "config", setValue);
       }
@@ -151,7 +161,7 @@ export const KerberosSettingsRequired = () => {
               <Switch
                 id={"kc-debug"}
                 isDisabled={false}
-                onChange={onChange}
+                onChange={(value) => onChange([`${value}`])}
                 isChecked={value[0] === "true"}
                 label={t("common:on")}
                 labelOff={t("common:off")}
@@ -180,7 +190,7 @@ export const KerberosSettingsRequired = () => {
               <Switch
                 id={"kc-allow-password-authentication"}
                 isDisabled={false}
-                onChange={onChange}
+                onChange={(value) => onChange([`${value}`])}
                 isChecked={value[0] === "true"}
                 label={t("common:on")}
                 labelOff={t("common:off")}
@@ -189,49 +199,52 @@ export const KerberosSettingsRequired = () => {
           ></Controller>
         </FormGroup>
 
-        {/* TODO: Field shows only if allowPasswordAuthentication is TRUE */}
-        <FormGroup
-          label={t("editMode")}
-          labelIcon={
-            <HelpItem
-              helpText={helpText("editModeKerberosHelp")}
-              forLabel={t("editMode")}
-              forID="kc-edit-mode"
-            />
-          }
-          fieldId="kc-edit-mode"
-        >
-          {" "}
-          <Controller
-            name="config.editMode"
-            defaultValue={t("common:selectOne")}
-            control={control}
-            render={({ onChange, value }) => (
-              <Select
-                toggleId="kc-edit-mode"
-                required
-                onToggle={() =>
-                  setIsEditModeDropdownOpen(!isEditModeDropdownOpen)
-                }
-                isOpen={isEditModeDropdownOpen}
-                onSelect={(_, value) => {
-                  onChange(value as string);
-                  setIsEditModeDropdownOpen(false);
-                }}
-                selections={value}
-                variant={SelectVariant.single}
-              >
-                <SelectOption
-                  key={0}
-                  value={t("common:selectOne")}
-                  isPlaceholder
-                />
-                <SelectOption key={1} value="READ_ONLY" />
-                <SelectOption key={2} value="UNSYNCED" />
-              </Select>
-            )}
-          ></Controller>
-        </FormGroup>
+        {_.isEqual(allowPassAuth, ["true"]) ? (
+          <FormGroup
+            label={t("editMode")}
+            labelIcon={
+              <HelpItem
+                helpText={helpText("editModeKerberosHelp")}
+                forLabel={t("editMode")}
+                forID="kc-edit-mode"
+              />
+            }
+            fieldId="kc-edit-mode"
+          >
+            {" "}
+            <Controller
+              name="config.editMode"
+              defaultValue={t("common:selectOne")}
+              control={control}
+              render={({ onChange, value }) => (
+                <Select
+                  toggleId="kc-edit-mode"
+                  required
+                  onToggle={() =>
+                    setIsEditModeDropdownOpen(!isEditModeDropdownOpen)
+                  }
+                  isOpen={isEditModeDropdownOpen}
+                  onSelect={(_, value) => {
+                    onChange(value as string);
+                    setIsEditModeDropdownOpen(false);
+                  }}
+                  selections={value}
+                  variant={SelectVariant.single}
+                >
+                  <SelectOption
+                    key={0}
+                    value={t("common:selectOne")}
+                    isPlaceholder
+                  />
+                  <SelectOption key={1} value="READ_ONLY" />
+                  <SelectOption key={2} value="UNSYNCED" />
+                </Select>
+              )}
+            ></Controller>
+          </FormGroup>
+        ) : (
+          <></>
+        )}
 
         <FormGroup
           label={t("updateFirstLogin")}
@@ -253,7 +266,7 @@ export const KerberosSettingsRequired = () => {
               <Switch
                 id={"kc-update-first-login"}
                 isDisabled={false}
-                onChange={onChange}
+                onChange={(value) => onChange([`${value}`])}
                 isChecked={value[0] === "true"}
                 label={t("common:on")}
                 labelOff={t("common:off")}