Avoid numeric value to accept negative numbers

[DSF-394]: https://hasurahq.atlassian.net/browse/DSF-394?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9196
GitOrigin-RevId: af9bb5c9c11b18fe240e91c40f4c3bc1c08737ca

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectMssqlWidget/schema.ts

@@ -16,8 +16,8 @@ export const connectionInfoSchema = z.object({
   ]),
   poolSettings: z
     .object({
-      totalMaxConnections: z.number().optional(),
-      idleTimeout: z.number().optional(),
+      totalMaxConnections: z.number().min(0).optional(),
+      idleTimeout: z.number().min(0).optional(),
     })
     .optional(),
 });

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectPostgresWidget/parts/NumberInput.tsx

@@ -48,6 +48,7 @@ export const NumberInputField = ({
           )}
           data-testid={name}
           value={localValue}
+          onWheelCapture={e => e.currentTarget.blur()}
         />
       </div>
     </FieldWrapper>

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectPostgresWidget/parts/PoolSettings.tsx

@@ -1,5 +1,9 @@
 import { InputField } from '../../../../../new-components/Form';
 
+const commonFieldProps: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {
+  onWheelCapture: e => e.currentTarget.blur(),
+};
+
 export const PoolSettings = ({ name }: { name: string }) => {
   return (
     <>
@@ -9,6 +13,7 @@ export const PoolSettings = ({ name }: { name: string }) => {
         label="Total Max Connections"
         placeholder="1000"
         tooltip="Maximum number of database connections"
+        fieldProps={commonFieldProps}
       />
       <InputField
         type="number"
@@ -16,6 +21,7 @@ export const PoolSettings = ({ name }: { name: string }) => {
         label="Idle Timeout"
         placeholder="180"
         tooltip="The idle timeout (in seconds) per connection"
+        fieldProps={commonFieldProps}
       />
       <InputField
         type="number"
@@ -23,6 +29,7 @@ export const PoolSettings = ({ name }: { name: string }) => {
         label="Retries"
         placeholder="1"
         tooltip="Number of retries to perform"
+        fieldProps={commonFieldProps}
       />
       <InputField
         type="number"
@@ -30,6 +37,7 @@ export const PoolSettings = ({ name }: { name: string }) => {
         label="Pool Timeout"
         placeholder="360"
         tooltip="Maximum time (in seconds) to wait while acquiring a Postgres connection from the pool"
+        fieldProps={commonFieldProps}
       />
       <InputField
         type="number"
@@ -37,6 +45,7 @@ export const PoolSettings = ({ name }: { name: string }) => {
         label="Connection Lifetime"
         placeholder="600"
         tooltip="Time (in seconds) from connection creation after which the connection should be destroyed and a new one created. A value of 0 indicates we should never destroy an active connection. If 0 is passed, memory from large query results may not be reclaimed."
+        fieldProps={commonFieldProps}
       />
     </>
   );

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectPostgresWidget/schema.ts

@@ -5,7 +5,7 @@ import { adaptPostgresConnection } from './utils/adaptResponse';
 
 const numberSchema = z.preprocess(
   val => parseInt(val as string, 10),
-  z.union([z.number(), z.nan()])
+  z.union([z.number().min(0), z.nan()])
 );
 
 export const poolSettingsSchema = z

frontend/libs/console/legacy-ce/src/lib/new-components/Form/Input.tsx

@@ -103,6 +103,11 @@ export type InputProps = FieldWrapperPassThroughProps & {
    * Optional right button
    */
   rightButton?: React.ReactElement;
+
+  /**
+   * Custom props to be passed to the HTML input element
+   */
+  fieldProps?: React.HTMLProps<HTMLInputElement>;
 };
 
 export const Input = ({
@@ -175,6 +180,7 @@ export const Input = ({
           onInput={onInput}
           disabled={disabled}
           data-testid={name}
+          onWheelCapture={fieldProps?.onWheelCapture || undefined}
           {...fieldProps}
         />
         {showInputEndContainer && (

frontend/libs/console/legacy-ce/src/lib/new-components/Form/InputField.tsx

@@ -87,6 +87,10 @@ export type InputFieldProps<T extends InputFieldDefaultType> =
      */
     inputClassName?: string;
     rightButton?: ReactElement;
+    /**
+     * Custom props to be passed to the HTML input element
+     */
+    fieldProps?: React.HTMLProps<HTMLInputElement>;
   };
 
 export const InputField = <T extends z.infer<Schema>>({