From 1cdd3fdfe218e873b298858b6838f553ba918e6b Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Wed, 21 Feb 2024 10:43:28 +1300
Subject: [PATCH] fix(input): allow clearing number inputs [EE-6714] (#11187)

---
 app/react-tools/yup-schemas.ts                | 19 +++++++++++++++++++
 .../form-components/Input/Input.tsx           |  4 ++++
 .../Slider/SliderWithInput.tsx                |  6 ++----
 .../ResourcesTab/ResourcesFieldset.tsx        |  9 +++++----
 .../columns/schedulingMode/ScaleForm.tsx      |  7 ++++++-
 .../kubeServicesValidation.ts                 |  8 ++++----
 .../AutoScalingFormSection.tsx                |  6 +++---
 .../ReplicationFormSection.tsx                | 12 ++++++------
 .../replicationValidation.ts                  |  6 ++++--
 .../resourceReservationValidation.ts          |  5 +++--
 .../KubeSettingsPanel/validation.ts           |  7 ++++---
 11 files changed, 60 insertions(+), 29 deletions(-)
 create mode 100644 app/react-tools/yup-schemas.ts

diff --git a/app/react-tools/yup-schemas.ts b/app/react-tools/yup-schemas.ts
new file mode 100644
index 000000000..4f614e21d
--- /dev/null
+++ b/app/react-tools/yup-schemas.ts
@@ -0,0 +1,19 @@
+import { NumberSchema, number } from 'yup';
+
+/**
+ * Returns a Yup schema for a number that can also be NaN.
+ *
+ * This function is a workaround for a known issue in Yup where it throws type errors
+ * when the number input is empty, having a value NaN. Yup doesn't like NaN values.
+ * More details can be found in these GitHub issues:
+ * https://github.com/jquense/yup/issues/1330
+ * https://github.com/jquense/yup/issues/211
+ *
+ * @param errorMessage The custom error message to display when the value is required.
+ * @returns A Yup number schema with a custom type error message.
+ */
+export function nanNumberSchema(
+  errorMessage = 'Value is required'
+): NumberSchema {
+  return number().typeError(errorMessage);
+}
diff --git a/app/react/components/form-components/Input/Input.tsx b/app/react/components/form-components/Input/Input.tsx
index 2108b314a..1bd02e01f 100644
--- a/app/react/components/form-components/Input/Input.tsx
+++ b/app/react/components/form-components/Input/Input.tsx
@@ -12,6 +12,8 @@ export const InputWithRef = forwardRef<
 export function Input({
   className,
   mRef: ref,
+  value,
+  type,
   ...props
 }: InputHTMLAttributes<HTMLInputElement> & {
   mRef?: Ref<HTMLInputElement>;
@@ -20,6 +22,8 @@ export function Input({
     <input
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
+      type={type}
+      value={type === 'number' && Number.isNaN(value) ? '' : value} // avoid the `"NaN" cannot be parsed, or is out of range.` error for an empty number input
       ref={ref}
       className={clsx('form-control', className)}
     />
diff --git a/app/react/components/form-components/Slider/SliderWithInput.tsx b/app/react/components/form-components/Slider/SliderWithInput.tsx
index bfbff328f..c66d9725b 100644
--- a/app/react/components/form-components/Slider/SliderWithInput.tsx
+++ b/app/react/components/form-components/Slider/SliderWithInput.tsx
@@ -20,7 +20,7 @@ export function SliderWithInput({
   visibleTooltip?: boolean;
 }) {
   return (
-    <div className="flex items-center gap-4">
+    <div className="flex items-center gap-6">
       {max && (
         <div className="mr-2 flex-1">
           <Slider
@@ -41,9 +41,7 @@ export function SliderWithInput({
         min="0"
         max={max}
         value={value}
-        onChange={({ target: { valueAsNumber: value } }) =>
-          onChange(Number.isNaN(value) ? 0 : value)
-        }
+        onChange={(e) => onChange(e.target.valueAsNumber)}
         className="w-32"
         data-cy={`${dataCy}Input`}
       />
diff --git a/app/react/docker/containers/CreateView/ResourcesTab/ResourcesFieldset.tsx b/app/react/docker/containers/CreateView/ResourcesTab/ResourcesFieldset.tsx
index aace001ef..e2bc40ddc 100644
--- a/app/react/docker/containers/CreateView/ResourcesTab/ResourcesFieldset.tsx
+++ b/app/react/docker/containers/CreateView/ResourcesTab/ResourcesFieldset.tsx
@@ -1,8 +1,9 @@
 import { FormikErrors } from 'formik';
-import { number, object, SchemaOf } from 'yup';
+import { object, SchemaOf } from 'yup';
 
 import { useSystemLimits } from '@/react/docker/proxy/queries/useInfo';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { nanNumberSchema } from '@/react-tools/yup-schemas';
 
 import { FormControl } from '@@/form-components/FormControl';
 import { FormSection } from '@@/form-components/FormSection';
@@ -94,15 +95,15 @@ export function resourcesValidation({
   maxCpu?: number;
 } = {}): SchemaOf<Values> {
   return object({
-    reservation: number()
+    reservation: nanNumberSchema()
       .min(0)
       .max(maxMemory, `Value must be between 0 and ${maxMemory}`)
       .default(0),
-    limit: number()
+    limit: nanNumberSchema()
       .min(0)
       .max(maxMemory, `Value must be between 0 and ${maxMemory}`)
       .default(0),
-    cpu: number()
+    cpu: nanNumberSchema()
       .min(0)
       .max(maxCpu, `Value must be between 0 and ${maxCpu}`)
       .default(0),
diff --git a/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleForm.tsx b/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleForm.tsx
index 8cafed392..716903838 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleForm.tsx
+++ b/app/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleForm.tsx
@@ -32,7 +32,7 @@ export function ScaleForm({
             type="number"
             min={0}
             step={1}
-            value={values.replicas}
+            value={Number.isNaN(values.replicas) ? '' : values.replicas}
             onKeyUp={(event) => {
               if (event.key === 'Escape') {
                 onClose();
@@ -48,6 +48,11 @@ export function ScaleForm({
           <Button color="none" icon={X} onClick={() => onClose()} />
           <LoadingButton
             isLoading={mutation.isLoading}
+            disabled={
+              values.replicas === service.Replicas ||
+              values.replicas < 0 ||
+              Number.isNaN(values.replicas)
+            }
             loadingText="Scaling..."
             color="none"
             icon={CheckSquare}
diff --git a/app/react/kubernetes/applications/CreateView/application-services/kubeServicesValidation.ts b/app/react/kubernetes/applications/CreateView/application-services/kubeServicesValidation.ts
index 15a72e21a..cb6aab951 100644
--- a/app/react/kubernetes/applications/CreateView/application-services/kubeServicesValidation.ts
+++ b/app/react/kubernetes/applications/CreateView/application-services/kubeServicesValidation.ts
@@ -1,5 +1,7 @@
 import { SchemaOf, array, object, boolean, string, mixed, number } from 'yup';
 
+import { nanNumberSchema } from '@/react-tools/yup-schemas';
+
 import { ServiceFormValues, ServicePort } from './types';
 import { prependWithSlash } from './utils';
 
@@ -53,9 +55,8 @@ export function kubeServicesValidation(
       Selector: object(),
       Ports: array(
         object({
-          port: number()
+          port: nanNumberSchema('Service port number is required.')
             .required('Service port number is required.')
-            .typeError('Service port number is required.')
             .min(1, 'Service port number must be inside the range 1-65535.')
             .max(65535, 'Service port number must be inside the range 1-65535.')
             .test(
@@ -86,9 +87,8 @@ export function kubeServicesValidation(
                 return duplicateServicePortCount <= 1;
               }
             ),
-          targetPort: number()
+          targetPort: nanNumberSchema('Container port number is required.')
             .required('Container port number is required.')
-            .typeError('Container port number is required.')
             .min(1, 'Container port number must be inside the range 1-65535.')
             .max(
               65535,
diff --git a/app/react/kubernetes/applications/components/AutoScalingFormSection/AutoScalingFormSection.tsx b/app/react/kubernetes/applications/components/AutoScalingFormSection/AutoScalingFormSection.tsx
index 062282d56..741392c3e 100644
--- a/app/react/kubernetes/applications/components/AutoScalingFormSection/AutoScalingFormSection.tsx
+++ b/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"
diff --git a/app/react/kubernetes/applications/components/ReplicationFormSection/ReplicationFormSection.tsx b/app/react/kubernetes/applications/components/ReplicationFormSection/ReplicationFormSection.tsx
index fd20bf523..c1075cee8 100644
--- a/app/react/kubernetes/applications/components/ReplicationFormSection/ReplicationFormSection.tsx
+++ b/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>}
     </>
   );
 }
diff --git a/app/react/kubernetes/applications/components/ReplicationFormSection/replicationValidation.ts b/app/react/kubernetes/applications/components/ReplicationFormSection/replicationValidation.ts
index 922b28e55..681840112 100644
--- a/app/react/kubernetes/applications/components/ReplicationFormSection/replicationValidation.ts
+++ b/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',
diff --git a/app/react/kubernetes/applications/components/ResourceReservationFormSection/resourceReservationValidation.ts b/app/react/kubernetes/applications/components/ResourceReservationFormSection/resourceReservationValidation.ts
index d21971f48..9c4e99b61 100644
--- a/app/react/kubernetes/applications/components/ResourceReservationFormSection/resourceReservationValidation.ts
+++ b/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.${
diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/validation.ts b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/validation.ts
index 7cd57d683..a036e4fa3 100644
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/validation.ts
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/validation.ts
@@ -1,4 +1,6 @@
-import { SchemaOf, object, string, boolean, number } from 'yup';
+import { SchemaOf, object, string, boolean } from 'yup';
+
+import { nanNumberSchema } from '@/react-tools/yup-schemas';
 
 import { isValidUrl } from '@@/form-components/validate-url';
 
@@ -17,8 +19,7 @@ export function validation(): SchemaOf<FormValues> {
       hideFileUpload: boolean().required(),
       requireNoteOnApplications: boolean().required(),
       hideStacksFunctionality: boolean().required(),
-      minApplicationNoteLength: number()
-        .typeError('Must be a number')
+      minApplicationNoteLength: nanNumberSchema('Must be a number')
         .default(0)
         .when('requireNoteOnApplications', {
           is: true,