changed to number input to allow for blank (#2138)
This commit is contained in:
parent
297cb4677b
commit
d46263d6c6
2 changed files with 21 additions and 33 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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")}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in a new issue