only query realm once (#563)

fixing: #548

src/realm-settings/GeneralTab.tsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
-import { useErrorHandler } from "react-error-boundary";
 import {
   ActionGroup,
-  AlertVariant,
   Button,
   ClipboardCopy,
   FormGroup,
@@ -20,52 +18,31 @@ import {
 
 import RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation";
 import { getBaseUrl } from "../util";
-import { useAdminClient, asyncStateFetch } from "../context/auth/AdminClient";
+import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
-import { useAlerts } from "../components/alert/Alerts";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormattedLink } from "../components/external-link/FormattedLink";
 
-export const RealmSettingsGeneralTab = () => {
+type RealmSettingsGeneralTabProps = {
+  save: (realm: RealmRepresentation) => void;
+  reset: () => void;
+};
+
+export const RealmSettingsGeneralTab = ({
+  save,
+  reset,
+}: RealmSettingsGeneralTabProps) => {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
-  const handleError = useErrorHandler();
   const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
+  const { register, control, handleSubmit } = useFormContext();
-  const { register, control, setValue, handleSubmit } = useForm();
-  const [realm, setRealm] = useState<RealmRepresentation>();
   const [open, setOpen] = useState(false);
 
   const baseUrl = getBaseUrl(adminClient);
 
   const requireSslTypes = ["all", "external", "none"];
 
-  useEffect(() => {
-    return asyncStateFetch(
-      () => adminClient.realms.findOne({ realm: realmName }),
-      (realm) => {
-        setRealm(realm);
-        setupForm(realm);
-      },
-      handleError
-    );
-  }, []);
-
-  const setupForm = (realm: RealmRepresentation) => {
-    Object.entries(realm).map((entry) => setValue(entry[0], entry[1]));
-  };
-
-  const save = async (realm: RealmRepresentation) => {
-    try {
-      await adminClient.realms.update({ realm: realmName }, realm);
-      setRealm(realm);
-      addAlert(t("saveSuccess"), AlertVariant.success);
-    } catch (error) {
-      addAlert(t("saveError", { error }), AlertVariant.danger);
-    }
-  };
-
   return (
     <>
       <PageSection variant="light">
@@ -219,7 +196,7 @@ export const RealmSettingsGeneralTab = () => {
             >
               {t("common:save")}
             </Button>
-            <Button variant="link" onClick={() => setupForm(realm!)}>
+            <Button variant="link" onClick={reset}>
               {t("common:revert")}
             </Button>
           </ActionGroup>

src/realm-settings/LoginTab.tsx

@@ -1,47 +1,21 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import {
+import { FormGroup, PageSection, Switch } from "@patternfly/react-core";
-  AlertVariant,
-  FormGroup,
-  PageSection,
-  Switch,
-} from "@patternfly/react-core";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormPanel } from "../components/scroll-form/FormPanel";
-import { asyncStateFetch, useAdminClient } from "../context/auth/AdminClient";
 import RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation";
-import { useErrorHandler } from "react-error-boundary";
-import { useRealm } from "../context/realm-context/RealmContext";
-import { useAlerts } from "../components/alert/Alerts";
 
-export const RealmSettingsLoginTab = () => {
+type RealmSettingsLoginTabProps = {
+  save: (realm: RealmRepresentation) => void;
+  realm: RealmRepresentation;
+};
+
+export const RealmSettingsLoginTab = ({
+  save,
+  realm,
+}: RealmSettingsLoginTabProps) => {
   const { t } = useTranslation("realm-settings");
-  const [realm, setRealm] = useState<RealmRepresentation>();
-  const handleError = useErrorHandler();
-  const adminClient = useAdminClient();
-  const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
-
-  useEffect(() => {
-    return asyncStateFetch(
-      () => adminClient.realms.findOne({ realm: realmName }),
-      (realm) => {
-        setRealm(realm);
-      },
-      handleError
-    );
-  }, []);
-
-  const save = async (realm: RealmRepresentation) => {
-    try {
-      await adminClient.realms.update({ realm: realmName }, realm);
-      setRealm(realm);
-      addAlert(t("saveSuccess"), AlertVariant.success);
-    } catch (error) {
-      addAlert(t("saveError", { error }), AlertVariant.danger);
-    }
-  };
 
   return (
     <>

src/realm-settings/RealmSettingsSection.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import { useErrorHandler } from "react-error-boundary";
 import {
   AlertVariant,
@@ -122,13 +122,16 @@ export const RealmSettingsSection = () => {
   const handleError = useErrorHandler();
   const { realm: realmName } = useRealm();
   const { addAlert } = useAlerts();
-  const { control, getValues, setValue } = useForm();
+  const form = useForm();
+  const { control, getValues, setValue } = form;
+  const [realm, setRealm] = useState<RealmRepresentation>();
 
   useEffect(() => {
     return asyncStateFetch(
       () => adminClient.realms.findOne({ realm: realmName }),
       (realm) => {
         setupForm(realm);
+        setRealm(realm);
       },
       handleError
     );
@@ -141,6 +144,7 @@ export const RealmSettingsSection = () => {
   const save = async (realm: RealmRepresentation) => {
     try {
       await adminClient.realms.update({ realm: realmName }, realm);
+      setRealm(realm);
       addAlert(t("saveSuccess"), AlertVariant.success);
     } catch (error) {
       addAlert(t("saveError", { error }), AlertVariant.danger);
@@ -163,29 +167,37 @@ export const RealmSettingsSection = () => {
         )}
       />
       <PageSection variant="light" className="pf-u-p-0">
+        <FormProvider {...form}>
           <KeycloakTabs isBox>
             <Tab
               eventKey="general"
               title={<TabTitleText>{t("realm-settings:general")}</TabTitleText>}
               data-testid="rs-general-tab"
             >
-            <RealmSettingsGeneralTab />
+              <RealmSettingsGeneralTab
+                save={save}
+                reset={() => setupForm(realm!)}
+              />
             </Tab>
             <Tab
               eventKey="login"
               title={<TabTitleText>{t("realm-settings:login")}</TabTitleText>}
               data-testid="rs-login-tab"
             >
-            <RealmSettingsLoginTab />
+              <RealmSettingsLoginTab save={save} realm={realm!} />
             </Tab>
             <Tab
               eventKey="themes"
               title={<TabTitleText>{t("realm-settings:themes")}</TabTitleText>}
               data-testid="rs-themes-tab"
             >
-            <RealmSettingsThemesTab />
+              <RealmSettingsThemesTab
+                save={save}
+                reset={() => setupForm(realm!)}
+              />
             </Tab>
           </KeycloakTabs>
+        </FormProvider>
       </PageSection>
     </>
   );

src/realm-settings/RealmSettingsTabs.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import { PageSection, Tab, TabTitleText } from "@patternfly/react-core";
-import { useTranslation } from "react-i18next";
-import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
-import { RealmSettingsLoginTab } from "./LoginTab";
-import { RealmSettingsGeneralTab } from "./GeneralTab";
-
-export const RealmSettingsTabs = () => {
-  const { t } = useTranslation("roles");
-
-  return (
-    <>
-      <PageSection variant="light" className="pf-u-p-0">
-        <KeycloakTabs isBox>
-          <Tab
-            eventKey="general"
-            title={<TabTitleText>{t("realm-settings:general")}</TabTitleText>}
-          >
-            <RealmSettingsGeneralTab />
-          </Tab>
-          <Tab
-            eventKey="login"
-            title={<TabTitleText>{t("realm-settings:login")}</TabTitleText>}
-          >
-            <RealmSettingsLoginTab />
-          </Tab>
-        </KeycloakTabs>
-      </PageSection>
-    </>
-  );
-};

src/realm-settings/ThemesTab.tsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
-import { useErrorHandler } from "react-error-boundary";
 import {
   ActionGroup,
-  AlertVariant,
   Button,
   FormGroup,
   PageSection,
@@ -15,21 +13,20 @@ import {
 } from "@patternfly/react-core";
 
 import RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation";
-import { useAdminClient, asyncStateFetch } from "../context/auth/AdminClient";
-import { useRealm } from "../context/realm-context/RealmContext";
-import { useAlerts } from "../components/alert/Alerts";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 
-export const RealmSettingsThemesTab = () => {
+type RealmSettingsThemesTabProps = {
+  save: (realm: RealmRepresentation) => void;
+  reset: () => void;
+};
+
+export const RealmSettingsThemesTab = ({
+  save,
+  reset,
+}: RealmSettingsThemesTabProps) => {
   const { t } = useTranslation("realm-settings");
-  const adminClient = useAdminClient();
-  const handleError = useErrorHandler();
-  const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
-  const { control, setValue, handleSubmit } = useForm();
-  const [realm, setRealm] = useState<RealmRepresentation>();
 
   const [loginThemeOpen, setLoginThemeOpen] = useState(false);
   const [accountThemeOpen, setAccountThemeOpen] = useState(false);
@@ -38,60 +35,22 @@ export const RealmSettingsThemesTab = () => {
 
   const [supportedLocalesOpen, setSupportedLocalesOpen] = useState(false);
   const [defaultLocaleOpen, setDefaultLocaleOpen] = useState(false);
-  const [selections, setSelections] = useState<string[]>([]);
 
-  const [
+  const { control, handleSubmit } = useFormContext();
-    internationalizationEnabled,
-    setInternationalizationEnabled,
-  ] = useState(false);
-
-  const form = useForm();
 
   const themeTypes = useServerInfo().themes!;
 
-  const watchSupportedLocales = form.watch(
+  const watchSupportedLocales = useWatch({
-    "supportedLocales",
+    control,
-    themeTypes?.account![0].locales
+    name: "supportedLocales",
-  );
+    defaultValue: themeTypes?.account![0].locales,
-
-  useEffect(() => {
-    return asyncStateFetch(
-      () => adminClient.realms.findOne({ realm: realmName }),
-      (realm) => {
-        setRealm(realm);
-        setupForm(realm);
-        setInternationalizationEnabled(realm.internationalizationEnabled!);
-      },
-      handleError
-    );
-  }, []);
-
-  useEffect(() => {
-    setValue("supportedLocales", realm?.supportedLocales);
-    setValue("defaultLocale", realm?.defaultLocale);
-  }, [internationalizationEnabled]);
-
-  const setupForm = (realm: RealmRepresentation) => {
-    const { ...formValues } = realm;
-
-    form.reset(formValues);
-    Object.entries(realm).map((entry) => {
-      if (entry[0] === "internationalizationEnabled") {
-        setInternationalizationEnabled(realm!.internationalizationEnabled!);
-      }
-      setValue(entry[0], entry[1]);
   });
-  };
 
-  const save = async (realm: RealmRepresentation) => {
+  const internationalizationEnabled = useWatch({
-    try {
+    control,
-      await adminClient.realms.update({ realm: realmName }, realm);
+    name: "internationalizationEnabled",
-      setRealm({ supportedLocales: selections, ...realm });
+    defaultValue: false,
-      addAlert(t("saveSuccess"), AlertVariant.success);
+  });
-    } catch (error) {
-      addAlert(t("saveError", { error }), AlertVariant.danger);
-    }
-  };
 
   return (
     <>
@@ -116,6 +75,7 @@ export const RealmSettingsThemesTab = () => {
             <Controller
               name="loginTheme"
               control={control}
+              defaultValue=""
               render={({ onChange, value }) => (
                 <Select
                   toggleId="kc-login-theme"
@@ -158,6 +118,7 @@ export const RealmSettingsThemesTab = () => {
             <Controller
               name="accountTheme"
               control={control}
+              defaultValue=""
               render={({ onChange, value }) => (
                 <Select
                   toggleId="kc-account-theme"
@@ -200,6 +161,7 @@ export const RealmSettingsThemesTab = () => {
             <Controller
               name="adminTheme"
               control={control}
+              defaultValue=""
               render={({ onChange, value }) => (
                 <Select
                   toggleId="kc-admin-console-theme"
@@ -244,6 +206,7 @@ export const RealmSettingsThemesTab = () => {
             <Controller
               name="emailTheme"
               control={control}
+              defaultValue=""
               render={({ onChange, value }) => (
                 <Select
                   toggleId="kc-email-theme"
@@ -279,6 +242,7 @@ export const RealmSettingsThemesTab = () => {
             <Controller
               name="internationalizationEnabled"
               control={control}
+              defaultValue={false}
               render={({ onChange, value }) => (
                 <Switch
                   id="kc-internationalization"
@@ -290,14 +254,7 @@ export const RealmSettingsThemesTab = () => {
                       ? "internationalization-enabled"
                       : "internationalization-disabled"
                   }
-                  onChange={(value) => {
+                  onChange={onChange}
-                    onChange(value);
-                    if (value) {
-                      setValue("internationalizationEnabled", true);
-                      setInternationalizationEnabled(value);
-                    }
-                    setInternationalizationEnabled(value);
-                  }}
                 />
               )}
             />
@@ -311,6 +268,7 @@ export const RealmSettingsThemesTab = () => {
                 <Controller
                   name="supportedLocales"
                   control={control}
+                  defaultValue={themeTypes?.account![0].locales}
                   render={({ value, onChange }) => (
                     <Select
                       toggleId="kc-supported-locales"
@@ -330,10 +288,9 @@ export const RealmSettingsThemesTab = () => {
                           onChange([...value, option]);
                           setSupportedLocalesOpen(false);
                         }
-                        setSelections([...value, v]);
                       }}
                       onClear={() => {
-                        onChange(setSelections([]));
+                        onChange([]);
                       }}
                       selections={value}
                       variant={SelectVariant.typeaheadMulti}
@@ -360,6 +317,7 @@ export const RealmSettingsThemesTab = () => {
                 <Controller
                   name="defaultLocale"
                   control={control}
+                  defaultValue=""
                   render={({ onChange, value }) => (
                     <Select
                       toggleId="kc-default-locale"
@@ -375,16 +333,7 @@ export const RealmSettingsThemesTab = () => {
                       placeholderText="Select one"
                       data-testid="select-default-locale"
                     >
-                      {selections.length !== 0
+                      {watchSupportedLocales.map(
-                        ? selections.map((locale: string, idx: number) => (
-                            <SelectOption
-                              key={`default-locale-${idx}`}
-                              value={locale}
-                            >
-                              {t(`allSupportedLocales.${locale}`)}
-                            </SelectOption>
-                          ))
-                        : watchSupportedLocales.map(
                         (locale: string, idx: number) => (
                           <SelectOption
                             key={`default-locale-${idx}`}
@@ -408,7 +357,7 @@ export const RealmSettingsThemesTab = () => {
             >
               {t("common:save")}
             </Button>
-            <Button variant="link" onClick={() => setupForm(realm!)}>
+            <Button variant="link" onClick={reset}>
               {t("common:revert")}
             </Button>
           </ActionGroup>

src/route-config.ts

@@ -29,7 +29,6 @@ import { RoleMappingForm } from "./client-scopes/add/RoleMappingForm";
 import { RealmRoleTabs } from "./realm-roles/RealmRoleTabs";
 import { SearchGroups } from "./groups/SearchGroups";
 import { CreateInitialAccessToken } from "./clients/initial-access/CreateInitialAccessToken";
-import { RealmSettingsTabs } from "./realm-settings/RealmSettingsTabs";
 import { LdapMapperDetails } from "./user-federation/ldap/mappers/LdapMapperDetails";
 import { AddIdentityProvider } from "./identity-providers/add/AddIdentityProvider";
 
@@ -179,12 +178,6 @@ export const routes: RoutesFn = (t: TFunction) => [
     breadcrumb: t("realmSettings"),
     access: "view-realm",
   },
-  {
-    path: "/:realm/realm-settings/general",
-    component: RealmSettingsTabs,
-    breadcrumb: t("realmSettings"),
-    access: "view-realm",
-  },
   {
     path: "/:realm/authentication",
     component: AuthenticationSection,