fix(input): allow clearing number inputs [EE-6714] (#11186)

app/react/kubernetes/applications/components/AutoScalingFormSection/AutoScalingFormSection.tsx

@@ -64,7 +64,7 @@ export function AutoScalingFormSection({
               onChange={(e) =>
                 onChange({
                   ...values,
-                  minReplicas: Number(e.target.value) || 0,
+                  minReplicas: e.target.valueAsNumber,
                 })
               }
               data-cy="k8sAppCreate-autoScaleMin"
@@ -83,7 +83,7 @@ export function AutoScalingFormSection({
               onChange={(e) =>
                 onChange({
                   ...values,
-                  maxReplicas: Number(e.target.value) || 1,
+                  maxReplicas: e.target.valueAsNumber,
                 })
               }
               data-cy="k8sAppCreate-autoScaleMax"
@@ -107,7 +107,7 @@ export function AutoScalingFormSection({
               onChange={(e) =>
                 onChange({
                   ...values,
-                  targetCpuUtilizationPercentage: Number(e.target.value) || 1,
+                  targetCpuUtilizationPercentage: e.target.valueAsNumber,
                 })
               }
               data-cy="k8sAppCreate-targetCPUInput"

app/react/kubernetes/applications/components/ReplicationFormSection/ReplicationFormSection.tsx

@@ -4,7 +4,6 @@ import { round } from 'lodash';
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
 import { TextTip } from '@@/Tip/TextTip';
-import { FormError } from '@@/form-components/FormError';
 
 import { ReplicaCountFormValues } from './types';
 
@@ -31,16 +30,18 @@ export function ReplicationFormSection({
 
   return (
     <>
-      <FormControl label="Instance count" required>
+      <FormControl
+        label="Instance count"
+        required
+        errors={errors?.replicaCount}
+      >
         <Input
           type="number"
           min="0"
           max="9999"
           value={values.replicaCount}
           disabled={!supportScalableReplicaDeployment}
-          onChange={(e) =>
-            onChange({ replicaCount: e.target.valueAsNumber || 0 })
-          }
+          onChange={(e) => onChange({ replicaCount: e.target.valueAsNumber })}
           className="w-1/4"
           data-cy="k8sAppCreate-replicaCountInput"
         />
@@ -54,7 +55,6 @@ export function ReplicationFormSection({
             <b>{memoryLimit * values.replicaCount} MB</b> of memory.
           </TextTip>
         )}
-      {errors?.replicaCount && <FormError>{errors.replicaCount}</FormError>}
     </>
   );
 }

app/react/kubernetes/applications/components/ReplicationFormSection/replicationValidation.ts

@@ -1,4 +1,6 @@
-import { SchemaOf, number, object } from 'yup';
+import { SchemaOf, object } from 'yup';
+
+import { nanNumberSchema } from '@/react-tools/yup-schemas';
 
 import { ReplicaCountFormValues } from './types';
 
@@ -19,7 +21,7 @@ export function replicationValidation(
     supportScalableReplicaDeployment,
   } = validationData || {};
   return object({
-    replicaCount: number()
+    replicaCount: nanNumberSchema('Instance count is required')
       .min(0, 'Instance count must be greater than or equal to 0.')
       .test(
         'overflow',

app/react/kubernetes/applications/components/ResourceReservationFormSection/resourceReservationValidation.ts

@@ -1,6 +1,7 @@
 import { SchemaOf, TestContext, number, object } from 'yup';
 
 import KubernetesResourceReservationHelper from '@/kubernetes/helpers/resourceReservationHelper';
+import { nanNumberSchema } from '@/react-tools/yup-schemas';
 
 import { ResourceQuotaFormValues } from './types';
 
@@ -22,8 +23,8 @@ export function resourceReservationValidation(
   validationData?: ValidationData
 ): SchemaOf<ResourceQuotaFormValues> {
   return object().shape({
-    memoryLimit: number()
-      .min(0)
+    memoryLimit: nanNumberSchema()
+      .min(0, 'Value must be greater than or equal to 0')
       .test(
         'exhaused',
         `The memory capacity for this namespace has been exhausted, so you cannot deploy the application.${