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

src/client-scopes/details/ScopeForm.tsx

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

src/identity-providers/component/DisplayOrder.tsx

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