libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

Migrate more of the realm setting to new form controls (#27647)

Browse source 
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-03-13 12:05:54 +01:00 committed by GitHub
parent 4a4e20c262
commit 1b761b5b4c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 468 additions and 565 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts
View file

@ -101,13 +101,15 @@ describe("Realm settings tabs tests", () => {
realmSettingsPage.fillReplyToEmail("replyTo@email.com");
realmSettingsPage.fillPort("10");
cy.findByTestId("email-tab-save").click();
cy.get("#kc-display-name-helper").contains("You must enter a valid email.");
cy.get("#kc-host-helper").contains("Required field");
cy.get("#smtpServer\\.from-helper").contains(
"You must enter a valid email.",
);
cy.get("#smtpServer\\.host-helper").contains("Required field");
cy.findByTestId("email-tab-revert").click();
cy.findByTestId("sender-email-address").should("be.empty");
cy.findByTestId("from-display-name").should("be.empty");
cy.get("#kc-port").should("be.empty");
cy.findByTestId("smtpServer.from").should("be.empty");
cy.findByTestId("smtpServer.fromDisplayName").should("be.empty");
cy.findByTestId("smtpServer.port").should("be.empty");
realmSettingsPage.addSenderEmail("example@example.com");
realmSettingsPage.toggleCheck(realmSettingsPage.enableSslCheck);

27
js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts
View file

@ -27,7 +27,7 @@ export default class RealmSettingsPage extends CommonPage {
adminThemeList = "#kc-admin-ui-theme + ul";
selectEmailTheme = "#kc-email-theme";
emailThemeList = "#kc-email-theme + ul";
hostInput = "#kc-host";
hostInput = "smtpServer.host";
ssoSessionIdleSelectMenu = "#kc-sso-session-idle-select-menu";
ssoSessionIdleSelectMenuList = "#kc-sso-session-idle-select-menu > div > ul";
ssoSessionMaxSelectMenu = "#kc-sso-session-max-select-menu";
@ -76,7 +76,7 @@ export default class RealmSettingsPage extends CommonPage {
duplicateEmailsSwitch = "duplicate-emails-switch";
verifyEmailSwitch = "verify-email-switch";
authSwitch = "email-authentication-switch";
fromInput = "sender-email-address";
fromInput = "smtpServer.from";
enableSslCheck = "enable-ssl";
enableStartTlsCheck = "enable-start-tls";
addProviderDropdown = "addProviderDropdown";
@ -98,8 +98,8 @@ export default class RealmSettingsPage extends CommonPage {
emailAddressInput = "email-address-input";
addBundleButton = "add-translationBtn";
confirmAddTranslation = "add-translation-confirm-button";
keyInput = "key-input";
valueInput = "value-input";
keyInput = "key";
valueInput = "value";
deleteAction = "delete-action";
modalConfirm = "confirm";
ssoSessionIdleInput = "sso-session-idle-input";
@ -173,8 +173,8 @@ export default class RealmSettingsPage extends CommonPage {
#jsonEditorSelect = "jsonEditor-profilesView";
#formViewSelectPolicies = "formView-policiesView";
#jsonEditorSelectPolicies = "jsonEditor-policiesView";
#newClientProfileNameInput = "client-profile-name";
#newClientProfileDescriptionInput = "client-profile-description";
#newClientProfileNameInput = "name";
#newClientProfileDescriptionInput = "description";
#saveNewClientProfileBtn = "saveCreateProfile";
#cancelNewClientProfile = "cancelCreateProfile";
#createPolicyEmptyStateBtn = "no-client-policies-empty-action";
@ -234,9 +234,9 @@ export default class RealmSettingsPage extends CommonPage {
#frontEndURL = "#kc-frontend-url";
#requireSSL = "#kc-require-ssl";
#unmanagedAttributes = "#kc-user-profile-unmanaged-attribute-policy";
#fromDisplayName = "from-display-name";
#replyToEmail = "#kc-reply-to";
#port = "#kc-port";
#fromDisplayName = "smtpServer.fromDisplayName";
#replyToEmail = "smtpServer.replyTo";
#port = "smtpServer.port";
#publicKeyBtn = ".kc-keys-list > tbody > tr > td > .button-wrapper > button";
#localizationLocalesSubTab = "rs-localization-locales-tab";
@ -300,7 +300,8 @@ export default class RealmSettingsPage extends CommonPage {
}
fillHostField(host: string) {
cy.get(this.hostInput).clear().type(host);
cy.findByTestId(this.hostInput).clear();
cy.findByTestId(this.hostInput).type(host);
return this;
}
@ -339,11 +340,13 @@ export default class RealmSettingsPage extends CommonPage {
}
fillReplyToEmail(email: string) {
cy.get(this.#replyToEmail).clear().type(email);
cy.findByTestId(this.#replyToEmail).clear();
cy.findByTestId(this.#replyToEmail).type(email);
}
fillPort(port: string) {
cy.get(this.#port).clear().type(port);
cy.findByTestId(this.#port).clear();
cy.findByTestId(this.#port).type(port);
}
fillFrontendURL(url: string) {

7
js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
View file

@ -3105,3 +3105,10 @@ emptyAdminEvents=No admin events
emptyAdminEventsInstructions=There are no admin events in this realm.
emptyUserEvents=No user events
emptyUserEventsInstructions=There are no user events in this realm.
smtpFromPlaceholder=Sender email address
smtpFromDisplayPlaceholder=Display name for Sender email address
replyToEmailPlaceholder=Reply to email address
replyToDisplayPlaceholder=Display name for "reply to" email address
senderEnvelopePlaceholder=Sender envelope email address
smtpPortPlaceholder=SMTP port (defaults to 25)
loginUsernamePlaceholder=Login username

65
js/apps/admin-ui/src/realm-settings/AddTranslationModal.tsx
View file

@ -2,16 +2,13 @@ import {
Button,
ButtonVariant,
Form,
FormGroup,
Modal,
ModalVariant,
ValidatedOptions,
} from "@patternfly/react-core";
import { SubmitHandler, UseFormReturn } from "react-hook-form";
import { FormProvider, SubmitHandler, UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { TextControl } from "ui-shared";
import type { KeyValueType } from "../components/key-value-form/key-value-convert";
import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
type AddTranslationModalProps = {
id?: string;
@ -29,11 +26,7 @@ export type TranslationForm = {
export const AddTranslationModal = ({
handleModalToggle,
save,
form: {
register,
handleSubmit,
formState: { errors },
},
form,
}: AddTranslationModalProps) => {
const { t } = useTranslation();
@ -66,46 +59,28 @@ export const AddTranslationModal = ({
</Button>,
]}
>
<Form id="translation-form" isHorizontal onSubmit={handleSubmit(save)}>
<FormGroup
label={t("key")}
<Form
id="translation-form"
isHorizontal
onSubmit={form.handleSubmit(save)}
>
<FormProvider {...form}>
<TextControl
name="key"
fieldId="key-id"
helperTextInvalid={t("required")}
validated={
errors.key ? ValidatedOptions.error : ValidatedOptions.default
}
isRequired
>
<KeycloakTextInput
data-testid="key-input"
label={t("key")}
autoFocus
id="key-id"
validated={
errors.key ? ValidatedOptions.error : ValidatedOptions.default
}
{...register("key", { required: true })}
rules={{
required: t("required"),
}}
/>
</FormGroup>
<FormGroup
<TextControl
name="value"
label={t("value")}
name="add-value"
fieldId="value-id"
helperTextInvalid={t("required")}
validated={
errors.value ? ValidatedOptions.error : ValidatedOptions.default
}
isRequired
>
<KeycloakTextInput
data-testid="value-input"
id="value-id"
validated={
errors.value ? ValidatedOptions.error : ValidatedOptions.default
}
{...register("value", { required: true })}
rules={{
required: t("required"),
}}
/>
</FormGroup>
</FormProvider>
</Form>
</Modal>
);

55
js/apps/admin-ui/src/realm-settings/ClientProfileForm.tsx
View file

@ -14,27 +14,22 @@ import {
DropdownItem,
Flex,
FlexItem,
FormGroup,
Label,
PageSection,
Text,
TextVariants,
ValidatedOptions,
} from "@patternfly/react-core";
import { PlusCircleIcon, TrashIcon } from "@patternfly/react-icons";
import { Fragment, useMemo, useState } from "react";
import { useFieldArray, useForm } from "react-hook-form";
import { FormProvider, useFieldArray, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import { HelpItem } from "ui-shared";
import { HelpItem, TextAreaControl, TextControl } from "ui-shared";
import { adminClient } from "../admin-client";
import { useAlerts } from "../components/alert/Alerts";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { FormAccess } from "../components/form/FormAccess";
import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
import { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { useFetch } from "../utils/useFetch";
@ -57,17 +52,18 @@ const defaultValues: ClientProfileForm = {
export default function ClientProfileForm() {
const { t } = useTranslation();
const navigate = useNavigate();
const form = useForm<ClientProfileForm>({
defaultValues,
mode: "onChange",
});
const {
handleSubmit,
setValue,
getValues,
register,
formState: { isDirty, errors },
formState: { isDirty },
control,
} = useForm<ClientProfileForm>({
defaultValues,
mode: "onChange",
});
} = form;
const { fields: profileExecutors, remove } = useFieldArray({
name: "executors",
@ -220,32 +216,22 @@ export default function ClientProfileForm() {
}
/>
<PageSection variant="light">
<FormProvider {...form}>
<FormAccess isHorizontal role="view-realm" className="pf-u-mt-lg">
<FormGroup
<TextControl
name="name"
label={t("newClientProfileName")}
fieldId="kc-name"
helperText={t("createClientProfileNameHelperText")}
isRequired
helperTextInvalid={t("required")}
validated={
errors.name ? ValidatedOptions.error : ValidatedOptions.default
}
>
<KeycloakTextInput
id="kc-name"
data-testid="client-profile-name"
isReadOnly={isGlobalProfile}
{...register("name", { required: true })}
readOnly={isGlobalProfile}
rules={{
required: t("required"),
}}
/>
</FormGroup>
<FormGroup label={t("description")} fieldId="kc-description">
<KeycloakTextArea
id="kc-description"
data-testid="client-profile-description"
isReadOnly={isGlobalProfile}
{...register("description")}
<TextAreaControl
name="description"
label={t("description")}
readOnly={isGlobalProfile}
/>
</FormGroup>
<ActionGroup>
{!isGlobalProfile && (
<Button
@ -430,6 +416,7 @@ export default function ClientProfileForm() {
</>
)}
</FormAccess>
</FormProvider>
</PageSection>
</>
);

192
js/apps/admin-ui/src/realm-settings/EmailTab.tsx
View file

@ -9,16 +9,14 @@ import {
Checkbox,
FormGroup,
PageSection,
Switch,
} from "@patternfly/react-core";
import { Controller, useForm, useWatch } from "react-hook-form";
import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { FormPanel, HelpItem } from "ui-shared";
import { FormPanel, HelpItem, SwitchControl, TextControl } from "ui-shared";
import { adminClient } from "../admin-client";
import { useAlerts } from "../components/alert/Alerts";
import { FormAccess } from "../components/form/FormAccess";
import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
import { PasswordInput } from "../components/password-input/PasswordInput";
import { useRealm } from "../context/realm-context/RealmContext";
import { toUser } from "../user/routes/User";
@ -43,6 +41,7 @@ export const RealmSettingsEmailTab = ({
const { addAlert, addError } = useAlerts();
const currentUser = useCurrentUser();
const form = useForm<FormFields>({ defaultValues: realm });
const {
register,
control,
@ -51,7 +50,7 @@ export const RealmSettingsEmailTab = ({
reset: resetForm,
getValues,
formState: { errors },
} = useForm<FormFields>({ defaultValues: realm });
} = form;
const reset = () => resetForm(realm);
const watchFromValue = watch("smtpServer.from", "");
@ -98,6 +97,7 @@ export const RealmSettingsEmailTab = ({
return (
<PageSection variant="light">
<FormProvider {...form}>
<FormPanel title={t("template")} className="kc-email-template">
<FormAccess
isHorizontal
@ -105,90 +105,49 @@ export const RealmSettingsEmailTab = ({
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
>
<FormGroup
<TextControl
name="smtpServer.from"
label={t("from")}
fieldId="kc-display-name"
isRequired
validated={errors.smtpServer?.from ? "error" : "default"}
helperTextInvalid={t("emailInvalid")}
>
<KeycloakTextInput
type="email"
id="kc-sender-email-address"
data-testid="sender-email-address"
placeholder="Sender email address"
validated={errors.smtpServer?.from ? "error" : "default"}
{...register("smtpServer.from", {
pattern: emailRegexPattern,
required: true,
})}
placeholder={t("smtpFromPlaceholder")}
rules={{
pattern: {
value: emailRegexPattern,
message: t("emailInvalid"),
},
required: t("required"),
}}
/>
</FormGroup>
<FormGroup
<TextControl
name="smtpServer.fromDisplayName"
label={t("fromDisplayName")}
fieldId="kc-from-display-name"
labelIcon={
<HelpItem
helpText={t("fromDisplayNameHelp")}
fieldLabelId="authentication"
labelIcon={t("fromDisplayNameHelp")}
placeholder={t("smtpFromDisplayPlaceholder")}
/>
}
>
<KeycloakTextInput
id="kc-from-display-name"
data-testid="from-display-name"
placeholder="Display name for Sender email address"
{...register("smtpServer.fromDisplayName")}
/>
</FormGroup>
<FormGroup
<TextControl
name="smtpServer.replyTo"
label={t("replyTo")}
fieldId="kc-reply-to"
validated={errors.smtpServer?.replyTo ? "error" : "default"}
helperTextInvalid={t("emailInvalid")}
>
<KeycloakTextInput
type="email"
id="kc-reply-to"
placeholder="Reply to email address"
validated={errors.smtpServer?.replyTo ? "error" : "default"}
{...register("smtpServer.replyTo", {
pattern: emailRegexPattern,
})}
placeholder={t("replyToEmailPlaceholder")}
rules={{
pattern: {
value: emailRegexPattern,
message: t("emailInvalid"),
},
}}
/>
</FormGroup>
<FormGroup
<TextControl
name="smtpServer.replyToDisplayName"
label={t("replyToDisplayName")}
fieldId="kc-reply-to-display-name"
labelIcon={
<HelpItem
helpText={t("replyToDisplayNameHelp")}
fieldLabelId="replyToDisplayName"
labelIcon={t("replyToDisplayNameHelp")}
placeholder={t("replyToDisplayPlaceholder")}
/>
}
>
<KeycloakTextInput
id="kc-reply-to-display-name"
placeholder='Display name for "reply to" email address'
{...register("smtpServer.replyToDisplayName")}
/>
</FormGroup>
<FormGroup
<TextControl
name="smtpServer.envelopeFrom"
label={t("envelopeFrom")}
fieldId="kc-envelope-from"
labelIcon={
<HelpItem
helpText={t("envelopeFromHelp")}
fieldLabelId="envelopeFrom"
labelIcon={t("envelopeFromHelp")}
placeholder={t("senderEnvelopePlaceholder")}
/>
}
>
<KeycloakTextInput
id="kc-envelope-from"
placeholder="Sender envelope email address"
{...register("smtpServer.envelopeFrom")}
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel
@ -201,27 +160,18 @@ export const RealmSettingsEmailTab = ({
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
>
<FormGroup
<TextControl
name="smtpServer.host"
label={t("host")}
fieldId="kc-host"
isRequired
validated={errors.smtpServer?.host ? "error" : "default"}
helperTextInvalid={t("required")}
>
<KeycloakTextInput
id="kc-host"
placeholder="SMTP host"
validated={errors.smtpServer?.host ? "error" : "default"}
{...register("smtpServer.host", { required: true })}
rules={{
required: t("required"),
}}
/>
</FormGroup>
<FormGroup label={t("port")} fieldId="kc-port">
<KeycloakTextInput
id="kc-port"
placeholder="SMTP port (defaults to 25)"
{...register("smtpServer.port")}
<TextControl
name="smtpServer.port"
label={t("port")}
placeholder={t("smtpPortPlaceholder")}
/>
</FormGroup>
<FormGroup label={t("encryption")} fieldId="kc-html-display-name">
<Controller
name="smtpServer.ssl"
@ -252,47 +202,23 @@ export const RealmSettingsEmailTab = ({
)}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label={t("authentication")}
fieldId="kc-authentication"
>
<Controller
<SwitchControl
name="smtpServer.auth"
control={control}
label={t("authentication")}
defaultValue=""
render={({ field }) => (
<Switch
id="kc-authentication-switch"
data-testid="email-authentication-switch"
label={t("enabled")}
labelOn={t("enabled")}
labelOff={t("disabled")}
isChecked={field.value === "true"}
onChange={(value) => {
field.onChange("" + value);
}}
aria-label={t("authentication")}
/>
)}
/>
</FormGroup>
{authenticationEnabled === "true" && (
<>
<FormGroup
<TextControl
name="smtpServer.user"
label={t("username")}
fieldId="kc-username"
isRequired
validated={errors.smtpServer?.user ? "error" : "default"}
helperTextInvalid={t("required")}
>
<KeycloakTextInput
id="kc-username"
data-testid="username-input"
placeholder="Login username"
validated={errors.smtpServer?.user ? "error" : "default"}
{...register("smtpServer.user", { required: true })}
placeholder={t("loginUsernamePlaceholder")}
rules={{
required: t("required"),
}}
/>
</FormGroup>
<FormGroup
label={t("password")}
fieldId="kc-username"
@ -310,7 +236,9 @@ export const RealmSettingsEmailTab = ({
id="kc-password"
data-testid="password-input"
aria-label={t("password")}
validated={errors.smtpServer?.password ? "error" : "default"}
validated={
errors.smtpServer?.password ? "error" : "default"
}
{...register("smtpServer.password", { required: true })}
/>
</FormGroup>
@ -371,8 +299,9 @@ export const RealmSettingsEmailTab = ({
onClick={() => testConnection()}
data-testid="test-connection-button"
isDisabled={
!(emailRegexPattern.test(watchFromValue) && watchHostValue) ||
!currentUser?.email
!(
emailRegexPattern.test(watchFromValue) && watchHostValue
) || !currentUser?.email
}
aria-describedby="descriptionTestConnection"
isLoading={isTesting}
@ -393,6 +322,7 @@ export const RealmSettingsEmailTab = ({
</ActionGroup>
</FormAccess>
</FormPanel>
</FormProvider>
</PageSection>
);
};

1
js/libs/ui-shared/src/controls/TextAreaControl.tsx
View file

@ -7,7 +7,6 @@ import {
UseControllerProps,
} from "react-hook-form";
import { FormLabel } from "./FormLabel";
import { KeycloakTextArea } from "./keycloak-text-area/KeycloakTextArea";
export type TextAreaControlProps<