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

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

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

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

@ -14,27 +14,22 @@ import {
DropdownItem, DropdownItem,
Flex, Flex,
FlexItem, FlexItem,
FormGroup,
Label, Label,
PageSection, PageSection,
Text, Text,
TextVariants, TextVariants,
ValidatedOptions,
} from "@patternfly/react-core"; } from "@patternfly/react-core";
import { PlusCircleIcon, TrashIcon } from "@patternfly/react-icons"; import { PlusCircleIcon, TrashIcon } from "@patternfly/react-icons";
import { Fragment, useMemo, useState } from "react"; 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 { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom"; 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 { adminClient } from "../admin-client";
import { useAlerts } from "../components/alert/Alerts"; import { useAlerts } from "../components/alert/Alerts";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { FormAccess } from "../components/form/FormAccess"; import { FormAccess } from "../components/form/FormAccess";
import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner"; 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 { ViewHeader } from "../components/view-header/ViewHeader";
import { useServerInfo } from "../context/server-info/ServerInfoProvider"; import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { useFetch } from "../utils/useFetch"; import { useFetch } from "../utils/useFetch";
@ -57,17 +52,18 @@ const defaultValues: ClientProfileForm = {
export default function ClientProfileForm() { export default function ClientProfileForm() {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const form = useForm<ClientProfileForm>({
defaultValues,
mode: "onChange",
});
const { const {
handleSubmit, handleSubmit,
setValue, setValue,
getValues, getValues,
register, formState: { isDirty },
formState: { isDirty, errors },
control, control,
} = useForm<ClientProfileForm>({ } = form;
defaultValues,
mode: "onChange",
});
const { fields: profileExecutors, remove } = useFieldArray({ const { fields: profileExecutors, remove } = useFieldArray({
name: "executors", name: "executors",
@ -220,216 +216,207 @@ export default function ClientProfileForm() {
} }
/> />
<PageSection variant="light"> <PageSection variant="light">
<FormAccess isHorizontal role="view-realm" className="pf-u-mt-lg"> <FormProvider {...form}>
<FormGroup <FormAccess isHorizontal role="view-realm" className="pf-u-mt-lg">
label={t("newClientProfileName")} <TextControl
fieldId="kc-name" name="name"
helperText={t("createClientProfileNameHelperText")} label={t("newClientProfileName")}
isRequired helperText={t("createClientProfileNameHelperText")}
helperTextInvalid={t("required")} readOnly={isGlobalProfile}
validated={ rules={{
errors.name ? ValidatedOptions.error : ValidatedOptions.default required: t("required"),
} }}
>
<KeycloakTextInput
id="kc-name"
data-testid="client-profile-name"
isReadOnly={isGlobalProfile}
{...register("name", { required: true })}
/> />
</FormGroup> <TextAreaControl
<FormGroup label={t("description")} fieldId="kc-description"> name="description"
<KeycloakTextArea label={t("description")}
id="kc-description" readOnly={isGlobalProfile}
data-testid="client-profile-description"
isReadOnly={isGlobalProfile}
{...register("description")}
/> />
</FormGroup> <ActionGroup>
<ActionGroup> {!isGlobalProfile && (
{!isGlobalProfile && ( <Button
<Button variant="primary"
variant="primary" onClick={() => handleSubmit(save)()}
onClick={() => handleSubmit(save)()} data-testid="saveCreateProfile"
data-testid="saveCreateProfile" isDisabled={!isDirty}
isDisabled={!isDirty} >
> {t("save")}
{t("save")} </Button>
</Button> )}
)} {editMode && !isGlobalProfile && (
{editMode && !isGlobalProfile && ( <Button
<Button id={"reloadProfile"}
id={"reloadProfile"} variant="link"
variant="link" data-testid={"reloadProfile"}
data-testid={"reloadProfile"} isDisabled={!isDirty}
isDisabled={!isDirty} onClick={reload}
onClick={reload} >
> {t("reload")}
{t("reload")} </Button>
</Button> )}
)} {!editMode && !isGlobalProfile && (
{!editMode && !isGlobalProfile && ( <Button
<Button id={"cancelCreateProfile"}
id={"cancelCreateProfile"} variant="link"
variant="link" component={(props) => (
component={(props) => ( <Link
<Link {...props}
{...props} to={toClientPolicies({ realm, tab: "profiles" })}
to={toClientPolicies({ realm, tab: "profiles" })}
/>
)}
data-testid={"cancelCreateProfile"}
>
{t("cancel")}
</Button>
)}
</ActionGroup>
{editMode && (
<>
<Flex>
<FlexItem>
<Text className="kc-executors" component={TextVariants.h1}>
{t("executors")}
<HelpItem
helpText={t("executorsHelpText")}
fieldLabelId="executors"
/> />
</Text> )}
</FlexItem> data-testid={"cancelCreateProfile"}
{!isGlobalProfile && ( >
<FlexItem align={{ default: "alignRight" }}> {t("cancel")}
<Button </Button>
id="addExecutor" )}
component={(props) => ( </ActionGroup>
<Link {editMode && (
{...props} <>
to={toAddExecutor({ <Flex>
realm, <FlexItem>
profileName, <Text className="kc-executors" component={TextVariants.h1}>
})} {t("executors")}
/> <HelpItem
)} helpText={t("executorsHelpText")}
variant="link" fieldLabelId="executors"
className="kc-addExecutor" />
data-testid="addExecutor" </Text>
icon={<PlusCircleIcon />}
>
{t("addExecutor")}
</Button>
</FlexItem> </FlexItem>
)} {!isGlobalProfile && (
</Flex> <FlexItem align={{ default: "alignRight" }}>
{profileExecutors.length > 0 && ( <Button
<> id="addExecutor"
<DataList aria-label={t("executors")} isCompact> component={(props) => (
{profileExecutors.map((executor, idx) => ( <Link
<DataListItem {...props}
aria-labelledby={"executors-list-item"} to={toAddExecutor({
key={executor.executor} realm,
id={executor.executor} profileName,
})}
/>
)}
variant="link"
className="kc-addExecutor"
data-testid="addExecutor"
icon={<PlusCircleIcon />}
> >
<DataListItemRow data-testid="executors-list-row"> {t("addExecutor")}
<DataListItemCells </Button>
dataListCells={[ </FlexItem>
<DataListCell )}
key="executor" </Flex>
data-testid="executor-type" {profileExecutors.length > 0 && (
> <>
{executor.configuration ? ( <DataList aria-label={t("executors")} isCompact>
<Button {profileExecutors.map((executor, idx) => (
component={(props) => ( <DataListItem
<Link aria-labelledby={"executors-list-item"}
{...props} key={executor.executor}
to={toExecutor({ id={executor.executor}
realm, >
profileName, <DataListItemRow data-testid="executors-list-row">
executorName: executor.executor!, <DataListItemCells
})} dataListCells={[
/> <DataListCell
)} key="executor"
variant="link" data-testid="executor-type"
data-testid="editExecutor" >
> {executor.configuration ? (
{executor.executor} <Button
</Button> component={(props) => (
) : ( <Link
<span className="kc-unclickable-executor"> {...props}
{executor.executor} to={toExecutor({
</span> realm,
)} profileName,
{executorTypes executorName: executor.executor!,
?.filter( })}
(type) => type.id === executor.executor,
)
.map((type) => (
<Fragment key={type.id}>
<HelpItem
key={type.id}
helpText={type.helpText}
fieldLabelId="executorTypeTextHelpText"
/>
{!isGlobalProfile && (
<Button
variant="link"
isInline
icon={
<TrashIcon
key={`executorType-trash-icon-${type.id}`}
className="kc-executor-trash-icon"
data-testid="deleteExecutor"
/>
}
onClick={() => {
toggleDeleteDialog();
setExecutorToDelete({
idx: idx,
name: type.id,
});
}}
aria-label={t("remove")}
/> />
)} )}
</Fragment> variant="link"
))} data-testid="editExecutor"
</DataListCell>, >
]} {executor.executor}
</Button>
) : (
<span className="kc-unclickable-executor">
{executor.executor}
</span>
)}
{executorTypes
?.filter(
(type) => type.id === executor.executor,
)
.map((type) => (
<Fragment key={type.id}>
<HelpItem
key={type.id}
helpText={type.helpText}
fieldLabelId="executorTypeTextHelpText"
/>
{!isGlobalProfile && (
<Button
variant="link"
isInline
icon={
<TrashIcon
key={`executorType-trash-icon-${type.id}`}
className="kc-executor-trash-icon"
data-testid="deleteExecutor"
/>
}
onClick={() => {
toggleDeleteDialog();
setExecutorToDelete({
idx: idx,
name: type.id,
});
}}
aria-label={t("remove")}
/>
)}
</Fragment>
))}
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
))}
</DataList>
{isGlobalProfile && (
<Button
id="backToClientPolicies"
component={(props) => (
<Link
{...props}
to={toClientPolicies({ realm, tab: "profiles" })}
/> />
</DataListItemRow> )}
</DataListItem> variant="primary"
))} className="kc-backToPolicies"
</DataList> data-testid="backToClientPolicies"
{isGlobalProfile && ( >
<Button {t("back")}
id="backToClientPolicies" </Button>
component={(props) => ( )}
<Link </>
{...props} )}
to={toClientPolicies({ realm, tab: "profiles" })} {profileExecutors.length === 0 && (
/> <>
)} <Divider />
variant="primary" <Text
className="kc-backToPolicies" className="kc-emptyExecutors"
data-testid="backToClientPolicies" component={TextVariants.h2}
> >
{t("back")} {t("emptyExecutors")}
</Button> </Text>
)} </>
</> )}
)} </>
{profileExecutors.length === 0 && ( )}
<> </FormAccess>
<Divider /> </FormProvider>
<Text
className="kc-emptyExecutors"
component={TextVariants.h2}
>
{t("emptyExecutors")}
</Text>
</>
)}
</>
)}
</FormAccess>
</PageSection> </PageSection>
</> </>
); );

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

@ -9,16 +9,14 @@ import {
Checkbox, Checkbox,
FormGroup, FormGroup,
PageSection, PageSection,
Switch,
} from "@patternfly/react-core"; } 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 { useTranslation } from "react-i18next";
import { Link } from "react-router-dom"; 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 { adminClient } from "../admin-client";
import { useAlerts } from "../components/alert/Alerts"; import { useAlerts } from "../components/alert/Alerts";
import { FormAccess } from "../components/form/FormAccess"; import { FormAccess } from "../components/form/FormAccess";
import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
import { PasswordInput } from "../components/password-input/PasswordInput"; import { PasswordInput } from "../components/password-input/PasswordInput";
import { useRealm } from "../context/realm-context/RealmContext"; import { useRealm } from "../context/realm-context/RealmContext";
import { toUser } from "../user/routes/User"; import { toUser } from "../user/routes/User";
@ -43,6 +41,7 @@ export const RealmSettingsEmailTab = ({
const { addAlert, addError } = useAlerts(); const { addAlert, addError } = useAlerts();
const currentUser = useCurrentUser(); const currentUser = useCurrentUser();
const form = useForm<FormFields>({ defaultValues: realm });
const { const {
register, register,
control, control,
@ -51,7 +50,7 @@ export const RealmSettingsEmailTab = ({
reset: resetForm, reset: resetForm,
getValues, getValues,
formState: { errors }, formState: { errors },
} = useForm<FormFields>({ defaultValues: realm }); } = form;
const reset = () => resetForm(realm); const reset = () => resetForm(realm);
const watchFromValue = watch("smtpServer.from", ""); const watchFromValue = watch("smtpServer.from", "");
@ -98,301 +97,232 @@ export const RealmSettingsEmailTab = ({
return ( return (
<PageSection variant="light"> <PageSection variant="light">
<FormPanel title={t("template")} className="kc-email-template"> <FormProvider {...form}>
<FormAccess <FormPanel title={t("template")} className="kc-email-template">
isHorizontal <FormAccess
role="manage-realm" isHorizontal
className="pf-u-mt-lg" role="manage-realm"
onSubmit={handleSubmit(save)} className="pf-u-mt-lg"
> onSubmit={handleSubmit(save)}
<FormGroup
label={t("from")}
fieldId="kc-display-name"
isRequired
validated={errors.smtpServer?.from ? "error" : "default"}
helperTextInvalid={t("emailInvalid")}
> >
<KeycloakTextInput <TextControl
name="smtpServer.from"
label={t("from")}
type="email" type="email"
id="kc-sender-email-address" placeholder={t("smtpFromPlaceholder")}
data-testid="sender-email-address" rules={{
placeholder="Sender email address" pattern: {
validated={errors.smtpServer?.from ? "error" : "default"} value: emailRegexPattern,
{...register("smtpServer.from", { message: t("emailInvalid"),
pattern: emailRegexPattern, },
required: true, required: t("required"),
})} }}
/> />
</FormGroup> <TextControl
<FormGroup name="smtpServer.fromDisplayName"
label={t("fromDisplayName")} label={t("fromDisplayName")}
fieldId="kc-from-display-name" labelIcon={t("fromDisplayNameHelp")}
labelIcon={ placeholder={t("smtpFromDisplayPlaceholder")}
<HelpItem
helpText={t("fromDisplayNameHelp")}
fieldLabelId="authentication"
/>
}
>
<KeycloakTextInput
id="kc-from-display-name"
data-testid="from-display-name"
placeholder="Display name for Sender email address"
{...register("smtpServer.fromDisplayName")}
/> />
</FormGroup> <TextControl
<FormGroup name="smtpServer.replyTo"
label={t("replyTo")} label={t("replyTo")}
fieldId="kc-reply-to"
validated={errors.smtpServer?.replyTo ? "error" : "default"}
helperTextInvalid={t("emailInvalid")}
>
<KeycloakTextInput
type="email" type="email"
id="kc-reply-to" placeholder={t("replyToEmailPlaceholder")}
placeholder="Reply to email address" rules={{
validated={errors.smtpServer?.replyTo ? "error" : "default"} pattern: {
{...register("smtpServer.replyTo", { value: emailRegexPattern,
pattern: emailRegexPattern, message: t("emailInvalid"),
})} },
}}
/> />
</FormGroup> <TextControl
<FormGroup name="smtpServer.replyToDisplayName"
label={t("replyToDisplayName")} label={t("replyToDisplayName")}
fieldId="kc-reply-to-display-name" labelIcon={t("replyToDisplayNameHelp")}
labelIcon={ placeholder={t("replyToDisplayPlaceholder")}
<HelpItem
helpText={t("replyToDisplayNameHelp")}
fieldLabelId="replyToDisplayName"
/>
}
>
<KeycloakTextInput
id="kc-reply-to-display-name"
placeholder='Display name for "reply to" email address'
{...register("smtpServer.replyToDisplayName")}
/> />
</FormGroup> <TextControl
<FormGroup name="smtpServer.envelopeFrom"
label={t("envelopeFrom")} label={t("envelopeFrom")}
fieldId="kc-envelope-from" labelIcon={t("envelopeFromHelp")}
labelIcon={ placeholder={t("senderEnvelopePlaceholder")}
<HelpItem
helpText={t("envelopeFromHelp")}
fieldLabelId="envelopeFrom"
/>
}
>
<KeycloakTextInput
id="kc-envelope-from"
placeholder="Sender envelope email address"
{...register("smtpServer.envelopeFrom")}
/> />
</FormGroup> </FormAccess>
</FormAccess> </FormPanel>
</FormPanel> <FormPanel
<FormPanel className="kc-email-connection"
className="kc-email-connection" title={t("connectionAndAuthentication")}
title={t("connectionAndAuthentication")}
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
> >
<FormGroup <FormAccess
label={t("host")} isHorizontal
fieldId="kc-host" role="manage-realm"
isRequired className="pf-u-mt-lg"
validated={errors.smtpServer?.host ? "error" : "default"} onSubmit={handleSubmit(save)}
helperTextInvalid={t("required")}
> >
<KeycloakTextInput <TextControl
id="kc-host" name="smtpServer.host"
placeholder="SMTP host" label={t("host")}
validated={errors.smtpServer?.host ? "error" : "default"} rules={{
{...register("smtpServer.host", { required: true })} required: t("required"),
}}
/> />
</FormGroup> <TextControl
<FormGroup label={t("port")} fieldId="kc-port"> name="smtpServer.port"
<KeycloakTextInput label={t("port")}
id="kc-port" placeholder={t("smtpPortPlaceholder")}
placeholder="SMTP port (defaults to 25)"
{...register("smtpServer.port")}
/> />
</FormGroup> <FormGroup label={t("encryption")} fieldId="kc-html-display-name">
<FormGroup label={t("encryption")} fieldId="kc-html-display-name"> <Controller
<Controller name="smtpServer.ssl"
name="smtpServer.ssl" control={control}
control={control} defaultValue="false"
defaultValue="false" render={({ field }) => (
render={({ field }) => ( <Checkbox
<Checkbox id="kc-enable-ssl"
id="kc-enable-ssl" data-testid="enable-ssl"
data-testid="enable-ssl" label={t("enableSSL")}
label={t("enableSSL")} isChecked={field.value === "true"}
isChecked={field.value === "true"} onChange={(value) => field.onChange("" + value)}
onChange={(value) => field.onChange("" + value)}
/>
)}
/>
<Controller
name="smtpServer.starttls"
control={control}
defaultValue="false"
render={({ field }) => (
<Checkbox
id="kc-enable-start-tls"
data-testid="enable-start-tls"
label={t("enableStartTLS")}
isChecked={field.value === "true"}
onChange={(value) => field.onChange("" + value)}
/>
)}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label={t("authentication")}
fieldId="kc-authentication"
>
<Controller
name="smtpServer.auth"
control={control}
defaultValue=""
render={({ field }) => (
<Switch
id="kc-authentication-switch"
data-testid="email-authentication-switch"
label={t("enabled")}
labelOff={t("disabled")}
isChecked={field.value === "true"}
onChange={(value) => {
field.onChange("" + value);
}}
aria-label={t("authentication")}
/>
)}
/>
</FormGroup>
{authenticationEnabled === "true" && (
<>
<FormGroup
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 })}
/>
</FormGroup>
<FormGroup
label={t("password")}
fieldId="kc-username"
isRequired
validated={errors.smtpServer?.password ? "error" : "default"}
helperTextInvalid={t("required")}
labelIcon={
<HelpItem
helpText={t("passwordHelp")}
fieldLabelId="password"
/> />
} )}
> />
<PasswordInput <Controller
id="kc-password" name="smtpServer.starttls"
data-testid="password-input" control={control}
aria-label={t("password")} defaultValue="false"
validated={errors.smtpServer?.password ? "error" : "default"} render={({ field }) => (
{...register("smtpServer.password", { required: true })} <Checkbox
/> id="kc-enable-start-tls"
</FormGroup> data-testid="enable-start-tls"
</> label={t("enableStartTLS")}
)} isChecked={field.value === "true"}
{currentUser && ( onChange={(value) => field.onChange("" + value)}
<FormGroup id="descriptionTestConnection"> />
{currentUser.email ? ( )}
<Alert />
variant="info"
component="h2"
isInline
title={t("testConnectionHint.withEmail", {
email: currentUser.email,
})}
/>
) : (
<Alert
variant="warning"
component="h2"
isInline
title={t("testConnectionHint.withoutEmail", {
userName: currentUser.username,
})}
actionLinks={
<AlertActionLink
component={(props) => (
<Link
{...props}
to={toUser({
realm: realmName,
id: currentUser.id!,
tab: "settings",
})}
/>
)}
>
{t("testConnectionHint.withoutEmailAction")}
</AlertActionLink>
}
/>
)}
</FormGroup> </FormGroup>
)} <SwitchControl
<ActionGroup> name="smtpServer.auth"
<ActionListItem> label={t("authentication")}
<Button defaultValue=""
variant="primary" labelOn={t("enabled")}
type="submit" labelOff={t("disabled")}
data-testid="email-tab-save" />
> {authenticationEnabled === "true" && (
{t("save")} <>
</Button> <TextControl
</ActionListItem> name="smtpServer.user"
<ActionListItem> label={t("username")}
<Button placeholder={t("loginUsernamePlaceholder")}
variant="secondary" rules={{
onClick={() => testConnection()} required: t("required"),
data-testid="test-connection-button" }}
isDisabled={ />
!(emailRegexPattern.test(watchFromValue) && watchHostValue) || <FormGroup
!currentUser?.email label={t("password")}
} fieldId="kc-username"
aria-describedby="descriptionTestConnection" isRequired
isLoading={isTesting} validated={errors.smtpServer?.password ? "error" : "default"}
spinnerAriaValueText={t("testingConnection")} helperTextInvalid={t("required")}
> labelIcon={
{t("testConnection")} <HelpItem
</Button> helpText={t("passwordHelp")}
</ActionListItem> fieldLabelId="password"
<ActionListItem> />
<Button }
variant="link" >
onClick={reset} <PasswordInput
data-testid="email-tab-revert" id="kc-password"
> data-testid="password-input"
{t("revert")} aria-label={t("password")}
</Button> validated={
</ActionListItem> errors.smtpServer?.password ? "error" : "default"
</ActionGroup> }
</FormAccess> {...register("smtpServer.password", { required: true })}
</FormPanel> />
</FormGroup>
</>
)}
{currentUser && (
<FormGroup id="descriptionTestConnection">
{currentUser.email ? (
<Alert
variant="info"
component="h2"
isInline
title={t("testConnectionHint.withEmail", {
email: currentUser.email,
})}
/>
) : (
<Alert
variant="warning"
component="h2"
isInline
title={t("testConnectionHint.withoutEmail", {
userName: currentUser.username,
})}
actionLinks={
<AlertActionLink
component={(props) => (
<Link
{...props}
to={toUser({
realm: realmName,
id: currentUser.id!,
tab: "settings",
})}
/>
)}
>
{t("testConnectionHint.withoutEmailAction")}
</AlertActionLink>
}
/>
)}
</FormGroup>
)}
<ActionGroup>
<ActionListItem>
<Button
variant="primary"
type="submit"
data-testid="email-tab-save"
>
{t("save")}
</Button>
</ActionListItem>
<ActionListItem>
<Button
variant="secondary"
onClick={() => testConnection()}
data-testid="test-connection-button"
isDisabled={
!(
emailRegexPattern.test(watchFromValue) && watchHostValue
) || !currentUser?.email
}
aria-describedby="descriptionTestConnection"
isLoading={isTesting}
spinnerAriaValueText={t("testingConnection")}
>
{t("testConnection")}
</Button>
</ActionListItem>
<ActionListItem>
<Button
variant="link"
onClick={reset}
data-testid="email-tab-revert"
>
{t("revert")}
</Button>
</ActionListItem>
</ActionGroup>
</FormAccess>
</FormPanel>
</FormProvider>
</PageSection> </PageSection>
); );
}; };

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

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