Use NumberInput instead of input (#3961)

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();
     });
 

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()
+      .find("input")
-      .type("not a number")
+      .should("have.value", 0)
-      .should("be.empty")
+      .clear()
       .type("111");
 
     cy.findByTestId(this.attributeConsumingServiceIndex)
-      .click()
+      .find("input")
-      .type("not a number")
+      .should("have.value", 0)
-      .should("be.empty")
+      .clear()
       .type("111");
 
     cy.findByTestId(this.attributeConsumingServiceName).click().type("name");

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
+        <Controller
-          type="number"
-          min="0"
-          max="2147483"
-          id="allowedClockSkew"
-          data-testid="allowedClockSkew"
           name="config.allowedClockSkew"
-          ref={register}
+          defaultValue={0}
-          isReadOnly={readOnly}
+          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
+        <Controller
-          type="number"
-          min="0"
-          max="65535"
-          id="attributeConsumingServiceIndex"
-          data-testid="attributeConsumingServiceIndex"
           name="config.attributeConsumingServiceIndex"
-          ref={register}
+          defaultValue={0}
-          isReadOnly={readOnly}
+          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>
 

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 }) => (
+            control={control}
+            render={({ onChange, value }) => {
+              const v = Number(value);
+              return (
                 <NumberInput
-                value={value}
                   data-testid="allowedClockSkew"
-                onMinus={() => onChange(value - 1)}
+                  inputName="allowedClockSkew"
-                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")}
+                  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" />