diff --git a/src/authentication/components/ExecutionConfigModal.tsx b/src/authentication/components/ExecutionConfigModal.tsx index a49aee2cca..38db9aa1be 100644 --- a/src/authentication/components/ExecutionConfigModal.tsx +++ b/src/authentication/components/ExecutionConfigModal.tsx @@ -10,7 +10,6 @@ import { FormGroup, Modal, ModalVariant, - TextInput, ValidatedOptions, } from "@patternfly/react-core"; import { CogIcon, TrashIcon } from "@patternfly/react-icons"; @@ -23,6 +22,7 @@ import { useAdminClient, useFetch } from "../../context/auth/AdminClient"; import { useAlerts } from "../../components/alert/Alerts"; import { HelpItem } from "../../components/help-enabler/HelpItem"; import { DynamicComponents } from "../../components/dynamic/DynamicComponents"; +import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput"; type ExecutionConfigModalForm = { alias: string; @@ -155,7 +155,7 @@ export const ExecutionConfigModal = ({ /> } > - } > - } > - { const { t } = useTranslation("authentication"); @@ -31,7 +27,7 @@ export const NameDescription = () => { } > - { /> } > - {configType && configType !== "int" && ( - } > - - - - { } helperTextInvalid={t("common:required")} > - @@ -110,7 +110,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => { } helperTextInvalid={t("common:maxLength", { length: 255 })} > - { defaultValue="" control={control} render={({ onChange, value }) => ( - - { } isRequired > - { label={t("common:name")} fieldId="kc-name" > - + } > - } > - - } > - } > - } > - - -
- +
diff --git a/src/clients/advanced/FineGrainOpenIdConnect.tsx b/src/clients/advanced/FineGrainOpenIdConnect.tsx index c8cfaffb52..c3e89536b8 100644 --- a/src/clients/advanced/FineGrainOpenIdConnect.tsx +++ b/src/clients/advanced/FineGrainOpenIdConnect.tsx @@ -8,7 +8,6 @@ import { Select, SelectOption, SelectVariant, - TextInput, } from "@patternfly/react-core"; import { FormAccess } from "../../components/form-access/FormAccess"; @@ -16,6 +15,7 @@ import { HelpItem } from "../../components/help-enabler/HelpItem"; import { useServerInfo } from "../../context/server-info/ServerInfoProvider"; import { sortProviders } from "../../util"; import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput"; +import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput"; type FineGrainOpenIdConnectProps = { save: () => void; @@ -152,7 +152,7 @@ export const FineGrainOpenIdConnect = ({ /> } > - } > - } > - >; @@ -35,7 +31,7 @@ export const FineGrainSamlEndpointConfig = ({ /> } > - } > - } > - } > - } > - } > - } > - { @@ -542,7 +543,7 @@ export const AuthorizationEvaluate = ({ client }: Props) => { } fieldId="client" > - ) : ( - } > - } > - } > - +
- } > - + } > - + } > - + - } > - + } > - +
diff --git a/src/clients/authorization/SearchDropdown.tsx b/src/clients/authorization/SearchDropdown.tsx index 35739cf7ba..9a959d1f5e 100644 --- a/src/clients/authorization/SearchDropdown.tsx +++ b/src/clients/authorization/SearchDropdown.tsx @@ -11,11 +11,11 @@ import { Select, SelectOption, SelectVariant, - TextInput, } from "@patternfly/react-core"; import type PolicyProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/policyProviderRepresentation"; import useToggle from "../../utils/useToggle"; +import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput"; import "./search-dropdown.css"; @@ -93,7 +93,7 @@ export const SearchDropdown = ({ onSubmit={handleSubmit(submit)} > - - - - - )} - { } fieldId="groups" > - { /> } > - { const { t } = useTranslation("clients"); @@ -27,7 +28,7 @@ export const Regex = () => { /> } > - { validated={errors.pattern ? "error" : "default"} helperTextInvalid={t("common:required")} > - { const { t } = useTranslation("clients"); @@ -61,7 +57,7 @@ export const X509 = () => { } isRequired > - - { /> } > - } > - )} {value.length === 0 && !conditionName && ( - - { - { {fields.map((attribute, index) => ( - { grow={{ default: "grow" }} spacer={{ default: "spacerNone" }} > - , + "onChange" +> & + Pick, "onChange">; + +export const KeycloakTextInput = forwardRef< + HTMLInputElement, + KeycloakTextInputProps +>(({ onChange, ...props }, ref) => { + const onChangeForward: TextInputProps["onChange"] = (_, event) => + onChange?.(event); + + return ; +}); + +// We need to fake the displayName to match what PatternFly expects. +// This is because PatternFly uses it to filter children in certain aspects. +// This is a stupid approach, but it's not like we can change that. +KeycloakTextInput.displayName = "TextInput"; diff --git a/src/components/password-input/PasswordInput.tsx b/src/components/password-input/PasswordInput.tsx index beab92dd19..5b022dbae8 100644 --- a/src/components/password-input/PasswordInput.tsx +++ b/src/components/password-input/PasswordInput.tsx @@ -1,14 +1,14 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { - Button, - InputGroup, - TextInput, - TextInputProps, -} from "@patternfly/react-core"; +import { Button, InputGroup } from "@patternfly/react-core"; import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons"; -type PasswordInputProps = TextInputProps & { +import { + KeycloakTextInput, + KeycloakTextInputProps, +} from "../keycloak-text-input/KeycloakTextInput"; + +type PasswordInputProps = KeycloakTextInputProps & { hasReveal?: boolean; }; @@ -21,7 +21,7 @@ const PasswordInputBase = ({ const [hidePassword, setHidePassword] = useState(true); return ( - { fieldId="kc-resourcePath" className="keycloak__events_search__form_label" > - { fieldId="kc-realm" className="keycloak__events_search__form_label" > - { fieldId="kc-client" className="keycloak__events_search__form_label" > - { fieldId="kc-user" className="keycloak__events_search__form_label" > - { fieldId="kc-ipAddress" className="keycloak__events_search__form_label" > - { fieldId="kc-dateFrom" className="keycloak__events_search__form_label" > - { fieldId="kc-dateTo" className="keycloak__events_search__form_label" > - - - - - - - ; @@ -60,7 +60,7 @@ export const AddMapperForm = ({ } helperTextInvalid={t("common:required")} > - { /> } > - { } helperTextInvalid={t("common:required")} > - { } helperTextInvalid={t("common:required")} > - { } fieldId="principalAttribute" > - { fieldId="allowedClockSkew" helperTextInvalid={t("common:required")} > - { fieldId="attributeConsumingServiceIndex" helperTextInvalid={t("common:required")} > - { fieldId="attributeConsumingServiceName" helperTextInvalid={t("common:required")} > - { } helperTextInvalid={t("common:required")} > - { } helperTextInvalid={t("common:required")} > - { } helperTextInvalid={t("common:required")} > - { @@ -92,7 +93,7 @@ export const SamlConnectSettings = () => { helperTextInvalid={t("common:required")} validated={errors.config?.entityId ? "error" : "default"} > - { } helperTextInvalid={t("common:required")} > - - )} {!create && ( - - { const { register } = useFormContext(); return ( - - diff --git a/src/realm-settings/AddMessageBundleModal.tsx b/src/realm-settings/AddMessageBundleModal.tsx index 123fb33b08..21d5cf34c4 100644 --- a/src/realm-settings/AddMessageBundleModal.tsx +++ b/src/realm-settings/AddMessageBundleModal.tsx @@ -6,13 +6,14 @@ import { FormGroup, Modal, ModalVariant, - TextInput, ValidatedOptions, } from "@patternfly/react-core"; import { useTranslation } from "react-i18next"; import { useForm, UseFormMethods } from "react-hook-form"; import type { KeyValueType } from "../components/key-value-form/key-value-convert"; +import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput"; + type AddMessageBundleModalProps = { id?: string; form: UseFormMethods; @@ -75,7 +76,7 @@ export const AddMessageBundleModal = ({ } isRequired > - - { } isRequired > - - - } > - - } > - } > - - - - } > - void; @@ -71,7 +71,7 @@ export const RealmSettingsGeneralTab = ({ /> - - } > - - - } > - + ); }; diff --git a/src/realm-settings/user-profile/AttributesGroupForm.tsx b/src/realm-settings/user-profile/AttributesGroupForm.tsx index 96ee6d2465..25289837ab 100644 --- a/src/realm-settings/user-profile/AttributesGroupForm.tsx +++ b/src/realm-settings/user-profile/AttributesGroupForm.tsx @@ -6,7 +6,6 @@ import { PageSection, Text, TextContent, - TextInput, } from "@patternfly/react-core"; import React, { useEffect, useMemo } from "react"; import { FormProvider, SubmitHandler, useForm } from "react-hook-form"; @@ -15,6 +14,7 @@ import { Link, useHistory, useParams } from "react-router-dom"; import { KeyValueInput } from "../../components/key-value-form/KeyValueInput"; import { FormAccess } from "../../components/form-access/FormAccess"; import { HelpItem } from "../../components/help-enabler/HelpItem"; +import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput"; import { ViewHeader } from "../../components/view-header/ViewHeader"; import { useRealm } from "../../context/realm-context/RealmContext"; import type { EditAttributesGroupParams } from "../routes/EditAttributesGroup"; @@ -128,7 +128,7 @@ export default function AttributesGroupForm() { /> } > - } > - } > - { validated={form.errors.name ? "error" : "default"} helperTextInvalid={form.errors.name?.message} > - { } fieldId="kc-attribute-display-name" > - - - - {/* These hidden fields are required so data object written back matches data retrieved */} -