From a40deb7073164e51807b6c34fac42f99c5f24ed1 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 14 Dec 2022 02:45:13 -0500
Subject: [PATCH] Use `NumberInput` instead of input (#3961)

---
 .../e2e/identity_providers_saml_test.spec.ts  |  5 +-
 .../social/ProviderSAMLSettings.ts            | 12 ++--
 .../add/DescriptorSettings.tsx                | 65 ++++++++++++++-----
 .../add/ExtendedNonDiscoverySettings.tsx      | 38 ++++++-----
 4 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/apps/admin-ui/cypress/e2e/identity_providers_saml_test.spec.ts b/apps/admin-ui/cypress/e2e/identity_providers_saml_test.spec.ts
index a8328b8b35..fe2545de92 100644
--- a/apps/admin-ui/cypress/e2e/identity_providers_saml_test.spec.ts
+++ b/apps/admin-ui/cypress/e2e/identity_providers_saml_test.spec.ts
@@ -34,9 +34,12 @@ describe("SAML identity provider test", () => {
   describe("SAML identity provider creation", () => {
     const samlProviderName = "saml";
 
-    beforeEach(() => {
+    before(() => {
       keycloakBefore();
       loginPage.logIn();
+    });
+
+    beforeEach(() => {
       sidebarPage.goToIdentityProviders();
     });
 
diff --git a/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/social/ProviderSAMLSettings.ts b/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/social/ProviderSAMLSettings.ts
index 7d155246f7..7b1ab60f96 100644
--- a/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/social/ProviderSAMLSettings.ts
+++ b/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/social/ProviderSAMLSettings.ts
@@ -224,15 +224,15 @@ export default class ProviderSAMLSettings extends PageObject {
 
   public assertTextFields() {
     cy.findByTestId(this.allowedClockSkew)
-      .click()
-      .type("not a number")
-      .should("be.empty")
+      .find("input")
+      .should("have.value", 0)
+      .clear()
       .type("111");
 
     cy.findByTestId(this.attributeConsumingServiceIndex)
-      .click()
-      .type("not a number")
-      .should("be.empty")
+      .find("input")
+      .should("have.value", 0)
+      .clear()
       .type("111");
 
     cy.findByTestId(this.attributeConsumingServiceName).click().type("name");
diff --git a/apps/admin-ui/src/identity-providers/add/DescriptorSettings.tsx b/apps/admin-ui/src/identity-providers/add/DescriptorSettings.tsx
index 2c7b79c3af..c3452bdc91 100644
--- a/apps/admin-ui/src/identity-providers/add/DescriptorSettings.tsx
+++ b/apps/admin-ui/src/identity-providers/add/DescriptorSettings.tsx
@@ -4,6 +4,7 @@ import { Controller, useFormContext, useWatch } from "react-hook-form";
 import {
   ExpandableSection,
   FormGroup,
+  NumberInput,
   Select,
   SelectOption,
   SelectVariant,
@@ -472,15 +473,31 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
         fieldId="allowedClockSkew"
         helperTextInvalid={t("common:required")}
       >
-        <KeycloakTextInput
-          type="number"
-          min="0"
-          max="2147483"
-          id="allowedClockSkew"
-          data-testid="allowedClockSkew"
+        <Controller
           name="config.allowedClockSkew"
-          ref={register}
-          isReadOnly={readOnly}
+          defaultValue={0}
+          control={control}
+          render={({ onChange, value }) => {
+            const v = Number(value);
+            return (
+              <NumberInput
+                data-testid="allowedClockSkew"
+                inputName="allowedClockSkew"
+                min={0}
+                max={2147483}
+                value={v}
+                readOnly
+                onPlus={() => onChange(v + 1)}
+                onMinus={() => onChange(v - 1)}
+                onChange={(event) => {
+                  const value = Number(
+                    (event.target as HTMLInputElement).value
+                  );
+                  onChange(value < 0 ? 0 : value);
+                }}
+              />
+            );
+          }}
         />
       </FormGroup>
 
@@ -495,15 +512,31 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
         fieldId="attributeConsumingServiceIndex"
         helperTextInvalid={t("common:required")}
       >
-        <KeycloakTextInput
-          type="number"
-          min="0"
-          max="65535"
-          id="attributeConsumingServiceIndex"
-          data-testid="attributeConsumingServiceIndex"
+        <Controller
           name="config.attributeConsumingServiceIndex"
-          ref={register}
-          isReadOnly={readOnly}
+          defaultValue={0}
+          control={control}
+          render={({ onChange, value }) => {
+            const v = Number(value);
+            return (
+              <NumberInput
+                data-testid="attributeConsumingServiceIndex"
+                inputName="attributeConsumingServiceIndex"
+                min={0}
+                max={2147483}
+                value={v}
+                readOnly
+                onPlus={() => onChange(v + 1)}
+                onMinus={() => onChange(v - 1)}
+                onChange={(event) => {
+                  const value = Number(
+                    (event.target as HTMLInputElement).value
+                  );
+                  onChange(value < 0 ? 0 : value);
+                }}
+              />
+            );
+          }}
         />
       </FormGroup>
 
diff --git a/apps/admin-ui/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx b/apps/admin-ui/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx
index d20fcb9d83..b4334072ec 100644
--- a/apps/admin-ui/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx
+++ b/apps/admin-ui/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx
@@ -91,23 +91,29 @@ export const ExtendedNonDiscoverySettings = () => {
         >
           <Controller
             name="config.allowedClockSkew"
-            control={control}
             defaultValue={0}
-            render={({ onChange, value }) => (
-              <NumberInput
-                value={value}
-                data-testid="allowedClockSkew"
-                onMinus={() => onChange(value - 1)}
-                onChange={onChange}
-                onPlus={() => onChange(value + 1)}
-                inputName="input"
-                inputAriaLabel={t("allowedClockSkew")}
-                minusBtnAriaLabel={t("common:minus")}
-                plusBtnAriaLabel={t("common:plus")}
-                min={0}
-                unit={t("common:times.seconds")}
-              />
-            )}
+            control={control}
+            render={({ onChange, value }) => {
+              const v = Number(value);
+              return (
+                <NumberInput
+                  data-testid="allowedClockSkew"
+                  inputName="allowedClockSkew"
+                  min={0}
+                  max={2147483}
+                  value={v}
+                  readOnly
+                  onPlus={() => onChange(v + 1)}
+                  onMinus={() => onChange(v - 1)}
+                  onChange={(event) => {
+                    const value = Number(
+                      (event.target as HTMLInputElement).value
+                    );
+                    onChange(value < 0 ? 0 : value);
+                  }}
+                />
+              );
+            }}
           />
         </FormGroup>
         <TextField field="config.forwardParameters" label="forwardParameters" />