Realm settings(login tab): fix switches (#1183)

* fix login tab

update cypress test

cypress test

rebase

test updates

cypress test fix

get correct ids

fix get call

fix tests

try refetching realm

add useEffect to fix server GET call

uncomment test

revert to original useFetch

prettier

create new function

set timeout to 10 ms

set to 100 ms

* add comment to useEffect per Jon feedback

cypress/integration/realm_settings_test.spec.ts

@@ -126,6 +126,15 @@ describe("Realm settings tests", () => {
       realmSettingsPage.toggleSwitch(realmSettingsPage.rememberMeSwitch);
     });
 
+    it("Check login tab values", () => {
+      sidebarPage.goToRealmSettings();
+      cy.findByTestId("rs-login-tab").click();
+
+      cy.get("#kc-user-reg-switch-off").should("be.visible");
+      cy.get("#kc-forgot-pw-switch-off").should("be.visible");
+      cy.get("#kc-remember-me-switch-off").should("not.be.visible");
+    });
+
     it("Go to email tab", () => {
       sidebarPage.goToRealmSettings();
       cy.findByTestId("rs-email-tab").click();

src/realm-settings/LoginTab.tsx

@@ -5,18 +5,33 @@ import { FormAccess } from "../components/form-access/FormAccess";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormPanel } from "../components/scroll-form/FormPanel";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
+import { Controller, useForm } from "react-hook-form";
 
 type RealmSettingsLoginTabProps = {
   save: (realm: RealmRepresentation) => void;
   realm: RealmRepresentation;
+  refresh: () => void;
 };
 
 export const RealmSettingsLoginTab = ({
   save,
   realm,
+  refresh,
 }: RealmSettingsLoginTabProps) => {
   const { t } = useTranslation("realm-settings");
 
+  const form = useForm<RealmRepresentation>({ mode: "onChange" });
+
+  const updateSwitchValue = (
+    onChange: (newValue: boolean) => void,
+    value: boolean,
+    name: string
+  ) => {
+    save({ ...realm, [name as keyof typeof realm]: value });
+    onChange(value);
+    refresh();
+  };
+
   return (
     <PageSection variant="light">
       <FormPanel className="kc-login-screen" title="Login screen customization">
@@ -35,16 +50,23 @@ export const RealmSettingsLoginTab = ({
             }
             hasNoPaddingTop
           >
-            <Switch
+            <Controller
-              id="kc-user-reg-switch"
-              data-testid="user-reg-switch"
               name="registrationAllowed"
-              label={t("common:on")}
+              defaultValue={realm.registrationAllowed}
-              labelOff={t("common:off")}
+              control={form.control}
-              isChecked={realm?.registrationAllowed}
+              render={({ onChange, value }) => (
-              onChange={(value) => {
+                <Switch
-                save({ ...realm, registrationAllowed: value });
+                  id="kc-user-reg-switch"
-              }}
+                  data-testid="user-reg-switch"
+                  name="registrationAllowed"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value}
+                  onChange={(value) => {
+                    updateSwitchValue(onChange, value, "registrationAllowed");
+                  }}
+                />
+              )}
             />
           </FormGroup>
           <FormGroup
@@ -59,16 +81,23 @@ export const RealmSettingsLoginTab = ({
             }
             hasNoPaddingTop
           >
-            <Switch
+            <Controller
-              id="kc-forgot-pw-switch"
-              data-testid="forgot-pw-switch"
               name="resetPasswordAllowed"
-              label={t("common:on")}
+              defaultValue={realm.resetPasswordAllowed}
-              labelOff={t("common:off")}
+              control={form.control}
-              isChecked={realm?.resetPasswordAllowed}
+              render={({ onChange, value }) => (
-              onChange={(value) => {
+                <Switch
-                save({ ...realm, resetPasswordAllowed: value });
+                  id="kc-forgot-pw-switch"
-              }}
+                  data-testid="forgot-pw-switch"
+                  name="resetPasswordAllowed"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value}
+                  onChange={(value) => {
+                    updateSwitchValue(onChange, value, "resetPasswordAllowed");
+                  }}
+                />
+              )}
             />
           </FormGroup>
           <FormGroup
@@ -83,16 +112,23 @@ export const RealmSettingsLoginTab = ({
             }
             hasNoPaddingTop
           >
-            <Switch
+            <Controller
-              id="kc-remember-me-switch"
-              data-testid="remember-me-switch"
               name="rememberMe"
-              label={t("common:on")}
+              defaultValue={realm.rememberMe}
-              labelOff={t("common:off")}
+              control={form.control}
-              isChecked={realm?.rememberMe}
+              render={({ onChange, value }) => (
-              onChange={(value) => {
+                <Switch
-                save({ ...realm, rememberMe: value });
+                  id="kc-remember-me-switch"
-              }}
+                  data-testid="remember-me-switch"
+                  name="rememberMe"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value}
+                  onChange={(value) => {
+                    updateSwitchValue(onChange, value, "rememberMe");
+                  }}
+                />
+              )}
             />
           </FormGroup>
         </FormAccess>
@@ -111,16 +147,27 @@ export const RealmSettingsLoginTab = ({
             }
             hasNoPaddingTop
           >
-            <Switch
+            <Controller
-              id="kc-email-as-username-switch"
-              data-testid="email-as-username-switch"
               name="registrationEmailAsUsername"
-              label={t("common:on")}
+              defaultValue={realm.registrationEmailAsUsername}
-              labelOff={t("common:off")}
+              control={form.control}
-              isChecked={realm?.registrationEmailAsUsername}
+              render={({ onChange, value }) => (
-              onChange={(value) => {
+                <Switch
-                save({ ...realm, registrationEmailAsUsername: value });
+                  id="kc-email-as-username-switch"
-              }}
+                  data-testid="email-as-username-switch"
+                  name="registrationEmailAsUsername"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value}
+                  onChange={(value) => {
+                    updateSwitchValue(
+                      onChange,
+                      value,
+                      "registrationEmailAsUsername"
+                    );
+                  }}
+                />
+              )}
             />
           </FormGroup>
           <FormGroup
@@ -135,16 +182,23 @@ export const RealmSettingsLoginTab = ({
             }
             hasNoPaddingTop
           >
-            <Switch
+            <Controller
-              id="kc-login-with-email-switch"
-              data-testid="login-with-email-switch"
               name="loginWithEmailAllowed"
-              label={t("common:on")}
+              defaultValue={realm.loginWithEmailAllowed}
-              labelOff={t("common:off")}
+              control={form.control}
-              isChecked={realm?.loginWithEmailAllowed}
+              render={({ onChange, value }) => (
-              onChange={(value) => {
+                <Switch
-                save({ ...realm, loginWithEmailAllowed: value });
+                  id="kc-login-with-email-switch"
-              }}
+                  data-testid="login-with-email-switch"
+                  name="loginWithEmailAllowed"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value}
+                  onChange={(value) => {
+                    updateSwitchValue(onChange, value, "loginWithEmailAllowed");
+                  }}
+                />
+              )}
             />
           </FormGroup>
           <FormGroup
@@ -159,24 +213,35 @@ export const RealmSettingsLoginTab = ({
             }
             hasNoPaddingTop
           >
-            <Switch
+            <Controller
-              id="kc-duplicate-emails-switch"
-              data-testid="duplicate-emails-switch"
-              label={t("common:on")}
-              labelOff={t("common:off")}
               name="duplicateEmailsAllowed"
-              isChecked={
+              defaultValue={realm.duplicateEmailsAllowed}
-                realm?.duplicateEmailsAllowed &&
+              control={form.control}
-                !realm?.loginWithEmailAllowed &&
+              render={({ onChange }) => (
-                !realm?.registrationEmailAsUsername
+                <Switch
-              }
+                  id="kc-duplicate-emails-switch"
-              onChange={(value) => {
+                  data-testid="duplicate-emails-switch"
-                save({ ...realm, duplicateEmailsAllowed: value });
+                  label={t("common:on")}
-              }}
+                  labelOff={t("common:off")}
-              isDisabled={
+                  name="duplicateEmailsAllowed"
-                realm?.loginWithEmailAllowed ||
+                  isChecked={
-                realm?.registrationEmailAsUsername
+                    form.getValues().duplicateEmailsAllowed &&
-              }
+                    !form.getValues().loginWithEmailAllowed &&
+                    !form.getValues().registrationEmailAsUsername
+                  }
+                  onChange={(value) => {
+                    updateSwitchValue(
+                      onChange,
+                      value,
+                      "duplicateEmailsAllowed"
+                    );
+                  }}
+                  isDisabled={
+                    form.getValues().loginWithEmailAllowed ||
+                    form.getValues().registrationEmailAsUsername
+                  }
+                />
+              )}
             />
           </FormGroup>
           <FormGroup
@@ -191,16 +256,23 @@ export const RealmSettingsLoginTab = ({
             }
             hasNoPaddingTop
           >
-            <Switch
+            <Controller
-              id="kc-verify-email-switch"
-              data-testid="verify-email-switch"
               name="verifyEmail"
-              label={t("common:on")}
+              defaultValue={realm.verifyEmail}
-              labelOff={t("common:off")}
+              control={form.control}
-              isChecked={realm?.verifyEmail}
+              render={({ onChange, value }) => (
-              onChange={(value) => {
+                <Switch
-                save({ ...realm, verifyEmail: value });
+                  id="kc-verify-email-switch"
-              }}
+                  data-testid="verify-email-switch"
+                  name="verifyEmail"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value}
+                  onChange={(value) => {
+                    updateSwitchValue(onChange, value, "verifyEmail");
+                  }}
+                />
+              )}
             />
           </FormGroup>
         </FormAccess>

src/realm-settings/RealmSettingsSection.tsx

@@ -2,7 +2,7 @@ import { Breadcrumb, BreadcrumbItem, Spinner } from "@patternfly/react-core";
 import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
@@ -52,6 +52,20 @@ export const RealmSettingsSection = () => {
     useState<ComponentRepresentation[]>();
   const [currentUser, setCurrentUser] = useState<UserRepresentation>();
   const { whoAmI } = useWhoAmI();
+  const [key, setKey] = useState(0);
+
+  const refresh = () => {
+    setKey(key + 1);
+  };
+
+  // delays realm fetch by 100ms in order to fetch newly updated value from server
+  useEffect(() => {
+    const update = async () => {
+      const realm = await adminClient.realms.findOne({ realm: realmName });
+      setRealm(realm);
+    };
+    setTimeout(update, 100);
+  }, [key]);
 
   useFetch(
     async () => {
@@ -82,6 +96,7 @@ export const RealmSettingsSection = () => {
   return (
     <RealmSettingsTabs
       realm={realm}
+      refresh={refresh}
       realmComponents={realmComponents}
       currentUser={currentUser}
     />

src/realm-settings/RealmSettingsTabs.tsx

@@ -53,6 +53,7 @@ type RealmSettingsHeaderProps = {
   value: boolean;
   save: () => void;
   realmName: string;
+  refresh: () => void;
 };
 
 const RealmSettingsHeader = ({
@@ -60,12 +61,12 @@ const RealmSettingsHeader = ({
   onChange,
   value,
   realmName,
+  refresh,
 }: RealmSettingsHeaderProps) => {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
   const history = useHistory();
-  const { refresh } = useRealm();
   const [partialImportOpen, setPartialImportOpen] = useState(false);
 
   const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
@@ -138,6 +139,7 @@ const RealmSettingsHeader = ({
 
 type RealmSettingsTabsProps = {
   realm: RealmRepresentation;
+  refresh: () => void;
   realmComponents: ComponentRepresentation[];
   currentUser: UserRepresentation;
 };
@@ -146,6 +148,7 @@ export const RealmSettingsTabs = ({
   realm,
   realmComponents,
   currentUser,
+  refresh,
 }: RealmSettingsTabsProps) => {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
@@ -162,7 +165,7 @@ export const RealmSettingsTabs = ({
   const [activeTab, setActiveTab] = useState(0);
   const [key, setKey] = useState(0);
 
-  const refresh = () => {
+  const refreshHeader = () => {
     setKey(new Date().getTime());
   };
 
@@ -188,9 +191,14 @@ export const RealmSettingsTabs = ({
           convertFormValuesToObject(realm.attributes, true)
         ).filter(([, v]) => v !== "")
       );
+
       await adminClient.realms.update(
         { realm: realmName },
-        { ...realm, id: realmName, attributes }
+        {
+          ...realm,
+          id: realmName,
+          attributes,
+        }
       );
       setupForm(realm);
       const isRealmRenamed = realmName !== realm.realm;
@@ -215,6 +223,7 @@ export const RealmSettingsTabs = ({
             value={value}
             onChange={onChange}
             realmName={realmName}
+            refresh={refreshHeader}
             save={() => save(getValues())}
           />
         )}
@@ -239,7 +248,11 @@ export const RealmSettingsTabs = ({
               data-testid="rs-login-tab"
               aria-label="login-tab"
             >
-              <RealmSettingsLoginTab save={save} realm={realm} />
+              <RealmSettingsLoginTab
+                refresh={refresh}
+                save={save}
+                realm={realm}
+              />
             </Tab>
             <Tab
               eventKey="email"