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

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),

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}