From d46263d6c6d891e3d1e1fa3d9f536439f272790a Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Thu, 24 Feb 2022 17:12:54 +0100
Subject: [PATCH] changed to number input to allow for blank (#2138)

---
 src/client-scopes/details/ScopeForm.tsx       | 41 ++++++++-----------
 .../component/DisplayOrder.tsx                | 13 ++----
 2 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/src/client-scopes/details/ScopeForm.tsx b/src/client-scopes/details/ScopeForm.tsx
index 3549356749..0b489430e4 100644
--- a/src/client-scopes/details/ScopeForm.tsx
+++ b/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 }) => {
-            const MIN_VALUE = 0;
-            const setValue = (newValue: number) =>
-              onChange(Math.max(newValue, MIN_VALUE));
-
-            return (
-              <NumberInput
-                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);
-                }}
-              />
-            );
-          }}
+          render={({ onChange, value }) => (
+            <TextInput
+              type="number"
+              value={value}
+              data-testid="displayOrder"
+              min={0}
+              onChange={onChange}
+            />
+          )}
         />
       </FormGroup>
       <ActionGroup>
@@ -304,6 +297,6 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           {t("common:cancel")}
         </Button>
       </ActionGroup>
-    </Form>
+    </FormAccess>
   );
 };
diff --git a/src/identity-providers/component/DisplayOrder.tsx b/src/identity-providers/component/DisplayOrder.tsx
index 76859c2dfa..eaf444015a 100644
--- a/src/identity-providers/component/DisplayOrder.tsx
+++ b/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")}
           />
         )}
       />