changed to number input to allow for blank (#2138)

This commit is contained in:
Erik Jan de Wit 2022-02-24 17:12:54 +01:00 committed by GitHub
parent 297cb4677b
commit d46263d6c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 33 deletions

View file

@ -3,7 +3,6 @@ import { Link, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import { import {
Form,
FormGroup, FormGroup,
ValidatedOptions, ValidatedOptions,
TextInput, TextInput,
@ -14,7 +13,6 @@ import {
ActionGroup, ActionGroup,
Button, Button,
TextArea, TextArea,
NumberInput,
} from "@patternfly/react-core"; } from "@patternfly/react-core";
import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation"; import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
@ -29,6 +27,7 @@ import { convertToFormValues } from "../../util";
import { useRealm } from "../../context/realm-context/RealmContext"; import { useRealm } from "../../context/realm-context/RealmContext";
import { getProtocolName } from "../../clients/utils"; import { getProtocolName } from "../../clients/utils";
import { toClientScopes } from "../routes/ClientScopes"; import { toClientScopes } from "../routes/ClientScopes";
import { FormAccess } from "../../components/form-access/FormAccess";
type ScopeFormProps = { type ScopeFormProps = {
clientScope: ClientScopeRepresentation; clientScope: ClientScopeRepresentation;
@ -59,7 +58,11 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
}, [clientScope]); }, [clientScope]);
return ( return (
<Form isHorizontal onSubmit={handleSubmit(save)} className="pf-u-mt-md"> <FormAccess
isHorizontal
onSubmit={handleSubmit(save)}
role="manage-clients"
>
<FormGroup <FormGroup
label={t("common:name")} label={t("common:name")}
labelIcon={ labelIcon={
@ -268,27 +271,17 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
> >
<Controller <Controller
name="attributes.gui.order" name="attributes.gui.order"
defaultValue={1} defaultValue=""
control={control} control={control}
render={({ onChange, value }) => { render={({ onChange, value }) => (
const MIN_VALUE = 0; <TextInput
const setValue = (newValue: number) => type="number"
onChange(Math.max(newValue, MIN_VALUE));
return (
<NumberInput
id="kc-gui-order"
value={value} value={value}
min={MIN_VALUE} data-testid="displayOrder"
onPlus={() => setValue(value + 1)} min={0}
onMinus={() => setValue(value - 1)} onChange={onChange}
onChange={(event) => {
const newValue = Number(event.currentTarget.value);
setValue(!isNaN(newValue) ? newValue : 0);
}}
/> />
); )}
}}
/> />
</FormGroup> </FormGroup>
<ActionGroup> <ActionGroup>
@ -304,6 +297,6 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
{t("common:cancel")} {t("common:cancel")}
</Button> </Button>
</ActionGroup> </ActionGroup>
</Form> </FormAccess>
); );
}; };

View file

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Controller, useFormContext } from "react-hook-form"; import { Controller, useFormContext } from "react-hook-form";
import { FormGroup, NumberInput } from "@patternfly/react-core"; import { FormGroup, TextInput } from "@patternfly/react-core";
import { HelpItem } from "../../components/help-enabler/HelpItem"; import { HelpItem } from "../../components/help-enabler/HelpItem";
@ -24,19 +24,14 @@ export const DisplayOrder = () => {
<Controller <Controller
name="config.guiOrder" name="config.guiOrder"
control={control} control={control}
defaultValue={0} defaultValue=""
render={({ onChange, value }) => ( render={({ onChange, value }) => (
<NumberInput <TextInput
type="number"
value={value} value={value}
data-testid="displayOrder" data-testid="displayOrder"
min={0} min={0}
onMinus={() => onChange(Number.parseInt(value) - 1)}
onChange={onChange} onChange={onChange}
onPlus={() => onChange(Number.parseInt(value) + 1)}
inputName="input"
inputAriaLabel={t("displayOrder")}
minusBtnAriaLabel={t("common:minus")}
plusBtnAriaLabel={t("common:plus")}
/> />
)} )}
/> />