Sql: Fix an issue with connection limits not updating when jsonData is updated (#83175)

packages/grafana-sql/src/components/configuration/ConnectionLimits.tsx

@@ -3,25 +3,17 @@ import React from 'react';
 import { DataSourceSettings } from '@grafana/data';
 import { ConfigSubSection, Stack } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { Field, Icon, InlineLabel, Input, Label, Switch, Tooltip } from '@grafana/ui';
+import { Field, Icon, InlineLabel, Label, Switch, Tooltip } from '@grafana/ui';
 
 import { SQLConnectionLimits, SQLOptions } from '../../types';
 
+import { NumberInput } from './NumberInput';
+
 interface Props<T> {
   onOptionsChange: Function;
   options: DataSourceSettings<SQLOptions>;
 }
 
-function toNumber(text: string): number {
-  if (text.trim() === '') {
-    // calling `Number('')` returns zero,
-    // so we have to handle this case
-    return NaN;
-  }
-
-  return Number(text);
-}
-
 export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>) => {
   const { onOptionsChange, options } = props;
   const jsonData = options.jsonData;
@@ -115,15 +107,11 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
           </Label>
         }
       >
-        <Input
+        <NumberInput
-          type="number"
+          value={jsonData.maxOpenConns}
-          placeholder="unlimited"
+          defaultValue={config.sqlConnectionLimits.maxOpenConns}
-          defaultValue={jsonData.maxOpenConns}
+          onChange={(value) => {
-          onChange={(e) => {
+            onMaxConnectionsChanged(value);
-            const newVal = toNumber(e.currentTarget.value);
-            if (!Number.isNaN(newVal)) {
-              onMaxConnectionsChanged(newVal);
-            }
           }}
           width={labelWidth}
         />
@@ -133,7 +121,7 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
         label={
           <Label>
             <Stack gap={0.5}>
-              <span>Auto Max Idle</span>
+              <span>Auto max idle</span>
               <Tooltip
                 content={
                   <span>
@@ -176,18 +164,13 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
         {autoIdle ? (
           <InlineLabel width={labelWidth}>{options.jsonData.maxIdleConns}</InlineLabel>
         ) : (
-          <Input
+          <NumberInput
-            type="number"
+            value={jsonData.maxIdleConns}
-            placeholder="2"
+            defaultValue={config.sqlConnectionLimits.maxIdleConns}
-            defaultValue={jsonData.maxIdleConns}
+            onChange={(value) => {
-            onChange={(e) => {
+              onJSONDataNumberChanged('maxIdleConns')(value);
-              const newVal = toNumber(e.currentTarget.value);
-              if (!Number.isNaN(newVal)) {
-                onJSONDataNumberChanged('maxIdleConns')(newVal);
-              }
             }}
             width={labelWidth}
-            disabled={autoIdle}
           />
         )}
       </Field>
@@ -211,15 +194,11 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
           </Label>
         }
       >
-        <Input
+        <NumberInput
-          type="number"
+          value={jsonData.connMaxLifetime}
-          placeholder="14400"
+          defaultValue={config.sqlConnectionLimits.connMaxLifetime}
-          defaultValue={jsonData.connMaxLifetime}
+          onChange={(value) => {
-          onChange={(e) => {
+            onJSONDataNumberChanged('connMaxLifetime')(value);
-            const newVal = toNumber(e.currentTarget.value);
-            if (!Number.isNaN(newVal)) {
-              onJSONDataNumberChanged('connMaxLifetime')(newVal);
-            }
           }}
           width={labelWidth}
         />

packages/grafana-sql/src/components/configuration/NumberInput.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Input } from '@grafana/ui/src/components/Input/Input';
+
+type NumberInputProps = {
+  value: number;
+  defaultValue: number;
+  onChange: (value: number) => void;
+  width: number;
+};
+
+export function NumberInput({ value, defaultValue, onChange, width }: NumberInputProps) {
+  const [isEmpty, setIsEmpty] = React.useState(false);
+  return (
+    <Input
+      type="number"
+      placeholder={String(defaultValue)}
+      value={isEmpty ? '' : value}
+      onChange={(e) => {
+        if (e.currentTarget.value?.trim() === '') {
+          setIsEmpty(true);
+          onChange(defaultValue);
+        } else {
+          setIsEmpty(false);
+          const newVal = Number(e.currentTarget.value);
+          if (!Number.isNaN(newVal)) {
+            onChange(newVal);
+          }
+        }
+      }}
+      width={width}
+    />
+  );
+}