added acr loa map field to realm settings (#2736)

* added acr loa map field to realm settings

fixes: #2668

* changed to use one form per tab, instead of shared

* fixed test

cypress/e2e/realm_settings_events_test.spec.ts

@@ -237,18 +237,21 @@ describe("Realm settings events tab tests", () => {
     sidebarPage.goToRealmSettings();
 
     cy.findByTestId("rs-localization-tab").click();
-
     cy.findByTestId("internationalization-disabled").click({ force: true });
 
     cy.get(realmSettingsPage.supportedLocalesTypeahead)
       .click()
       .get(".pf-c-select__menu-item")
       .contains("Dansk")
       .click();
-
     cy.get("#kc-l-supported-locales").click();
 
+    cy.intercept("GET", `/admin/realms/${realmName}/localization/en*`).as(
+      "load"
+    );
+
     cy.findByTestId("localization-tab-save").click();
+    cy.wait("@load");
 
     addBundle();
 

public/resources/en/realm-settings.json

@@ -99,25 +99,25 @@
   "noKeysDescription": "You haven't created any active keys",
   "certificate": "Certificate",
   "loginScreenCustomization": "Login screen customization",
-  "userRegistration": "User registration",
+  "registrationAllowed": "User registration",
   "userRegistrationHelpText": "Enable/disable the registration page. A link for registration will show on login page too.",
-  "forgotPassword": "Forgot password",
+  "resetPasswordAllowed": "Forgot password",
   "forgotPasswordHelpText": "Show a link on login page for user to click when they have forgotten their credentials.",
   "rememberMe": "Remember me",
   "rememberMeHelpText": "Show checkbox on login page to allow user to remain logged in between browser restarts until session expires.",
   "emailSettings": "Email settings",
-  "emailAsUsername": "Email as username",
+  "registrationEmailAsUsername": "Email as username",
   "emailAsUsernameHelpText": "Allow users to set email as username.",
-  "loginWithEmail": "Login with email",
+  "loginWithEmailAllowed": "Login with email",
   "loginWithEmailHelpText": "Allow users to log in with their email address.",
-  "duplicateEmails": "Duplicate emails",
+  "duplicateEmailsAllowed": "Duplicate emails",
   "duplicateEmailsHelpText": "Allow multiple users to have the same email address. Changing this setting will also clear the user's cache. It is recommended to manually update email constraints of existing users in the database after switching off support for duplicate email addresses.",
   "provideEmailTitle": "Provide your email address",
   "provideEmail": "To test connection, you should provide your email address first.",
   "verifyEmail": "Verify email",
   "verifyEmailHelpText": "Require user to verify their email address after initial login or after address changes are submitted.",
   "userInfoSettings": "User info settings",
-  "editUsername": "Edit username",
+  "editUsernameAllowed": "Edit username",
   "enableSwitchSuccess": "{{switch}} changed successfully",
   "enableSwitchError": "Could not enable / disable due to {{error}}",
   "testConnection": "Test connection",

src/index.css

@@ -1,7 +1,7 @@
 @import "@patternfly/patternfly/patternfly.min.css";
 @import "@patternfly/patternfly/patternfly-addons.css";
 
-.keycloak__pageheader_brand {
+img.keycloak__pageheader_brand {
   height: 35px;
 }
 

src/realm-settings/GeneralTab.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Controller, useFormContext } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import {
   ActionGroup,
   Button,
@@ -16,40 +16,56 @@ import {
 } from "@patternfly/react-core";
 
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
-import { getBaseUrl } from "../util";
+import { convertToFormValues, getBaseUrl } from "../util";
 import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormattedLink } from "../components/external-link/FormattedLink";
 import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
+import { KeyValueInput } from "../components/key-value-form/KeyValueInput";
 
 type RealmSettingsGeneralTabProps = {
+  realm: RealmRepresentation;
   save: (realm: RealmRepresentation) => void;
-  reset: () => void;
 };
 
 export const RealmSettingsGeneralTab = ({
+  realm,
   save,
-  reset,
 }: RealmSettingsGeneralTabProps) => {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const { realm: realmName } = useRealm();
+  const form = useForm<RealmRepresentation>({ shouldUnregister: false });
   const {
     register,
     control,
     handleSubmit,
+    setValue,
     formState: { isDirty },
-  } = useFormContext();
+  } = form;
   const isFeatureEnabled = useIsFeatureEnabled();
   const [open, setOpen] = useState(false);
 
   const baseUrl = getBaseUrl(adminClient);
 
   const requireSslTypes = ["all", "external", "none"];
 
+  const setupForm = () => {
+    convertToFormValues(realm, setValue);
+    if (realm.attributes?.["acr.loa.map"]) {
+      const result = Object.entries(
+        JSON.parse(realm.attributes["acr.loa.map"])
+      ).flatMap(([key, value]) => ({ key, value }));
+      result.concat({ key: "", value: "" });
+      setValue("attributes.acr.loa.map", result);
+    }
+  };
+
+  useEffect(setupForm, []);
+
   return (
     <PageSection variant="light">
       <FormAccess
@@ -143,6 +159,20 @@ export const RealmSettingsGeneralTab = ({
             )}
           />
         </FormGroup>
+        <FormGroup
+          label={t("clients:acrToLoAMapping")}
+          fieldId="acrToLoAMapping"
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:acrToLoAMapping"
+              fieldLabelId="clients:acrToLoAMapping"
+            />
+          }
+        >
+          <FormProvider {...form}>
+            <KeyValueInput name="attributes.acr.loa.map" />
+          </FormProvider>
+        </FormGroup>
         <FormGroup
           hasNoPaddingTop
           label={t("userManagedAccess")}
@@ -237,7 +267,7 @@ export const RealmSettingsGeneralTab = ({
           <Button
             data-testid="general-tab-revert"
             variant="link"
-            onClick={reset}
+            onClick={setupForm}
           >
             {t("common:revert")}
           </Button>

src/realm-settings/LocalizationTab.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { cloneDeep, isEqual, uniqWith } from "lodash-es";
-import { Controller, useForm, useFormContext, useWatch } from "react-hook-form";
+import { Controller, useForm, useWatch } from "react-hook-form";
 import {
   ActionGroup,
   AlertVariant,
@@ -49,10 +49,10 @@ import { PaginatingTableToolbar } from "../components/table-toolbar/PaginatingTa
 import { SearchIcon } from "@patternfly/react-icons";
 import { useWhoAmI } from "../context/whoami/WhoAmI";
 import type { KeyValueType } from "../components/key-value-form/key-value-convert";
+import { convertToFormValues } from "../util";
 
 type LocalizationTabProps = {
   save: (realm: RealmRepresentation) => void;
-  reset: () => void;
   refresh: () => void;
   realm: RealmRepresentation;
 };
@@ -67,11 +67,7 @@ export type BundleForm = {
   messageBundle: KeyValueType;
 };
 
-export const LocalizationTab = ({
-  save,
-  reset,
-  realm,
-}: LocalizationTabProps) => {
+export const LocalizationTab = ({ save, realm }: LocalizationTabProps) => {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const [addMessageBundleModalOpen, setAddMessageBundleModalOpen] =
@@ -82,7 +78,9 @@ export const LocalizationTab = ({
   const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
   const [selectMenuLocale, setSelectMenuLocale] = useState(DEFAULT_LOCALE);
 
-  const { getValues, control, handleSubmit, formState } = useFormContext();
+  const { setValue, getValues, control, handleSubmit, formState } = useForm({
+    shouldUnregister: false,
+  });
   const [selectMenuValueSelected, setSelectMenuValueSelected] = useState(false);
   const [messageBundles, setMessageBundles] = useState<[string, string][]>([]);
   const [tableRows, setTableRows] = useState<IRow[]>([]);
@@ -93,6 +91,15 @@ export const LocalizationTab = ({
   const { realm: currentRealm } = useRealm();
   const { whoAmI } = useWhoAmI();
 
+  const setupForm = () => {
+    convertToFormValues(realm, setValue);
+    if (realm.supportedLocales?.length === 0) {
+      setValue("supportedLocales", [DEFAULT_LOCALE]);
+    }
+  };
+
+  useEffect(setupForm, []);
+
   const watchSupportedLocales = useWatch<string[]>({
     control,
     name: "supportedLocales",
@@ -475,7 +482,7 @@ export const LocalizationTab = ({
             >
               {t("common:save")}
             </Button>
-            <Button variant="link" onClick={reset}>
+            <Button variant="link" onClick={setupForm}>
               {t("common:revert")}
             </Button>
           </ActionGroup>