Changed key provider form to use ui shared (#27704)
* replaced KeycloakTextInput with TextControl Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> * replaced KeycloakTextInput with TextControl and fixed helpText Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> * small test fix Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> --------- Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
This commit is contained in:
agagancarczyk
GitHub
parent
7d104dbe9d
commit
84cf306833
3 changed files with 37 additions and 74 deletions
|
|
@ -83,7 +83,7 @@ export default class RealmSettingsPage extends CommonPage {
|
|||
activeSwitch = "active";
|
||||
enabledSwitch = "enabled";
|
||||
addProviderButton = "add-provider-button";
|
||||
displayName = "name-input";
|
||||
displayName = "name";
|
||||
enableEvents = "eventsEnabled";
|
||||
eventsUserSave = "save-user";
|
||||
enableAdminEvents = "adminEventsEnabled";
|
||||
|
|
|
|||
|
|
@ -750,6 +750,7 @@ eventTypes.EXECUTE_ACTIONS_ERROR.name=Execute actions error
|
|||
path=Path
|
||||
overwritten=Overwritten
|
||||
mapperNameHelp=Name of the mapper
|
||||
providerIdHelp=Provider ID
|
||||
deleteProviderError=Error deleting the provider
|
||||
supportedLocalesHelp=The locales to support for this realm. The user chooses one of these locales on the login screen.
|
||||
comparisonHelp=Specifies the comparison method used to evaluate the requested context classes or statements. The default is "Exact".
|
||||
|
|
|
|||
|
|
@ -3,21 +3,16 @@ import {
|
|||
ActionGroup,
|
||||
AlertVariant,
|
||||
Button,
|
||||
FormGroup,
|
||||
PageSection,
|
||||
TextInput,
|
||||
ValidatedOptions,
|
||||
} from "@patternfly/react-core";
|
||||
import { Controller, FormProvider, useForm } from "react-hook-form";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { HelpItem } from "ui-shared";
|
||||
|
||||
import { TextControl } from "ui-shared";
|
||||
import { adminClient } from "../../../admin-client";
|
||||
import { useAlerts } from "../../../components/alert/Alerts";
|
||||
import { DynamicComponents } from "../../../components/dynamic/DynamicComponents";
|
||||
import { FormAccess } from "../../../components/form/FormAccess";
|
||||
import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
|
||||
import { ViewHeader } from "../../../components/view-header/ViewHeader";
|
||||
import { useServerInfo } from "../../../context/server-info/ServerInfoProvider";
|
||||
import { KEY_PROVIDER_TYPE } from "../../../util";
|
||||
|
|
@ -47,13 +42,7 @@ export const KeyProviderForm = ({
|
|||
const form = useForm<ComponentRepresentation>({
|
||||
mode: "onChange",
|
||||
});
|
||||
const {
|
||||
register,
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset,
|
||||
} = form;
|
||||
const { handleSubmit, reset } = form;
|
||||
|
||||
const save = async (component: ComponentRepresentation) => {
|
||||
if (component.config)
|
||||
|
|
@ -99,61 +88,33 @@ export const KeyProviderForm = ({
|
|||
|
||||
return (
|
||||
<FormAccess isHorizontal role="manage-realm" onSubmit={handleSubmit(save)}>
|
||||
{id && (
|
||||
<FormGroup
|
||||
label={t("providerId")}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={t("mapperNameHelp")}
|
||||
fieldLabelId="providerId"
|
||||
/>
|
||||
}
|
||||
fieldId="providerId"
|
||||
isRequired
|
||||
>
|
||||
<KeycloakTextInput
|
||||
id="providerId"
|
||||
data-testid="providerId-input"
|
||||
isReadOnly
|
||||
{...register("id")}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
<FormGroup
|
||||
label={t("name")}
|
||||
labelIcon={
|
||||
<HelpItem helpText={t("mapperNameHelp")} fieldLabelId="name" />
|
||||
}
|
||||
fieldId="name"
|
||||
isRequired
|
||||
validated={
|
||||
errors.name ? ValidatedOptions.error : ValidatedOptions.default
|
||||
}
|
||||
helperTextInvalid={t("required")}
|
||||
>
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
defaultValue={providerType}
|
||||
render={({ field }) => (
|
||||
<TextInput
|
||||
id="name"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
data-testid="name-input"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormProvider {...form}>
|
||||
{id && (
|
||||
<TextControl
|
||||
name="id"
|
||||
label={t("providerId")}
|
||||
labelIcon={t("providerIdHelp")}
|
||||
rules={{
|
||||
required: t("required"),
|
||||
}}
|
||||
readOnly
|
||||
/>
|
||||
)}
|
||||
<TextControl
|
||||
name="name"
|
||||
defaultValue={providerType}
|
||||
label={t("name")}
|
||||
labelIcon={t("mapperNameHelp")}
|
||||
rules={{
|
||||
required: t("required"),
|
||||
}}
|
||||
/>
|
||||
<DynamicComponents
|
||||
properties={
|
||||
allComponentTypes.find((type) => type.id === providerType)
|
||||
?.properties || []
|
||||
}
|
||||
/>
|
||||
</FormProvider>
|
||||
<ActionGroup>
|
||||
<Button
|
||||
data-testid="add-provider-button"
|
||||
|
|
@ -166,6 +127,7 @@ export const KeyProviderForm = ({
|
|||
{t("cancel")}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</FormProvider>
|
||||
</FormAccess>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue