Postgres: Switch the datasource plugin from lib/pq to pgx (#108443)

* Postgres: Switch the datasource plugin from lib/pq to pgx

* Fix lint

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

@@ -6,6 +6,8 @@ import { Field, Icon, InlineLabel, Label, Stack, Switch, Tooltip } from '@grafan
 
 import { SQLConnectionLimits, SQLOptions } from '../../types';
 
+import { MaxLifetimeField } from './MaxLifetimeField';
+import { MaxOpenConnectionsField } from './MaxOpenConnectionsField';
 import { NumberInput } from './NumberInput';
 
 interface Props<T> {
@@ -87,40 +89,11 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
     <ConfigSubSection
       title={t('grafana-sql.components.connection-limits.title-connection-limits', 'Connection limits')}
     >
-      <Field
-        label={
-          <Label>
-            <Stack gap={0.5}>
-              <span>
-                <Trans i18nKey="grafana-sql.components.connection-limits.max-open">Max open</Trans>
-              </span>
-              <Tooltip
-                content={
-                  <span>
-                    <Trans i18nKey="grafana-sql.components.connection-limits.content-max-open">
-                      The maximum number of open connections to the database. If <i>Max idle connections</i> is greater
-                      than 0 and the <i>Max open connections</i> is less than <i>Max idle connections</i>, then
-                      <i>Max idle connections</i> will be reduced to match the <i>Max open connections</i> limit. If set
-                      to 0, there is no limit on the number of open connections.
-                    </Trans>
-                  </span>
-                }
-              >
-                <Icon name="info-circle" size="sm" />
-              </Tooltip>
-            </Stack>
-          </Label>
-        }
-      >
-        <NumberInput
-          value={jsonData.maxOpenConns}
-          defaultValue={config.sqlConnectionLimits.maxOpenConns}
-          onChange={(value) => {
-            onMaxConnectionsChanged(value);
-          }}
-          width={labelWidth}
-        />
-      </Field>
+      <MaxOpenConnectionsField
+        labelWidth={labelWidth}
+        onMaxConnectionsChanged={onMaxConnectionsChanged}
+        jsonData={jsonData}
+      />
 
       <Field
         label={
@@ -191,38 +164,11 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
         )}
       </Field>
 
-      <Field
-        label={
-          <Label>
-            <Stack gap={0.5}>
-              <span>
-                <Trans i18nKey="grafana-sql.components.connection-limits.max-lifetime">Max lifetime</Trans>
-              </span>
-              <Tooltip
-                content={
-                  <span>
-                    <Trans i18nKey="grafana-sql.components.connection-limits.content-max-lifetime">
-                      The maximum amount of time in seconds a connection may be reused. If set to 0, connections are
-                      reused forever.
-                    </Trans>
-                  </span>
-                }
-              >
-                <Icon name="info-circle" size="sm" />
-              </Tooltip>
-            </Stack>
-          </Label>
-        }
-      >
-        <NumberInput
-          value={jsonData.connMaxLifetime}
-          defaultValue={config.sqlConnectionLimits.connMaxLifetime}
-          onChange={(value) => {
-            onJSONDataNumberChanged('connMaxLifetime')(value);
-          }}
-          width={labelWidth}
-        />
-      </Field>
+      <MaxLifetimeField
+        labelWidth={labelWidth}
+        onMaxLifetimeChanged={onJSONDataNumberChanged('connMaxLifetime')}
+        jsonData={jsonData}
+      />
     </ConfigSubSection>
   );
 };

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

@@ -0,0 +1,47 @@
+import { Trans } from '@grafana/i18n';
+import { config } from '@grafana/runtime';
+import { Field, Icon, Label, Stack, Tooltip } from '@grafana/ui';
+
+import { SQLOptions } from '../../types';
+
+import { NumberInput } from './NumberInput';
+
+interface Props {
+  labelWidth: number;
+  onMaxLifetimeChanged: (number?: number) => void;
+  jsonData: SQLOptions;
+}
+export function MaxLifetimeField({ labelWidth, onMaxLifetimeChanged, jsonData }: Props) {
+  return (
+    <Field
+      label={
+        <Label>
+          <Stack gap={0.5}>
+            <span>
+              <Trans i18nKey="grafana-sql.components.connection-limits.max-lifetime">Max lifetime</Trans>
+            </span>
+            <Tooltip
+              content={
+                <span>
+                  <Trans i18nKey="grafana-sql.components.connection-limits.content-max-lifetime">
+                    The maximum amount of time in seconds a connection may be reused. If set to 0, connections are
+                    reused forever.
+                  </Trans>
+                </span>
+              }
+            >
+              <Icon name="info-circle" size="sm" />
+            </Tooltip>
+          </Stack>
+        </Label>
+      }
+    >
+      <NumberInput
+        value={jsonData.connMaxLifetime}
+        defaultValue={config.sqlConnectionLimits.connMaxLifetime}
+        onChange={onMaxLifetimeChanged}
+        width={labelWidth}
+      />
+    </Field>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { Trans } from '@grafana/i18n';
+import { config } from '@grafana/runtime';
+import { Field, Icon, Label, Stack, Tooltip } from '@grafana/ui';
+
+import { SQLOptions } from '../../types';
+
+import { NumberInput } from './NumberInput';
+
+interface Props {
+  labelWidth: number;
+  onMaxConnectionsChanged: (number?: number) => void;
+  jsonData: SQLOptions;
+}
+
+export function MaxOpenConnectionsField({ labelWidth, onMaxConnectionsChanged, jsonData }: Props) {
+  return (
+    <Field
+      label={
+        <Label>
+          <Stack gap={0.5}>
+            <span>
+              <Trans i18nKey="grafana-sql.components.connection-limits.max-open">Max open</Trans>
+            </span>
+            <Tooltip
+              content={
+                <span>
+                  <Trans i18nKey="grafana-sql.components.connection-limits.content-max-open">
+                    The maximum number of open connections to the database. If <i>Max idle connections</i> is greater
+                    than 0 and the <i>Max open connections</i> is less than <i>Max idle connections</i>, then
+                    <i>Max idle connections</i> will be reduced to match the <i>Max open connections</i> limit. If set
+                    to 0, there is no limit on the number of open connections.
+                  </Trans>
+                </span>
+              }
+            >
+              <Icon name="info-circle" size="sm" />
+            </Tooltip>
+          </Stack>
+        </Label>
+      }
+    >
+      <NumberInput
+        value={jsonData.maxOpenConns}
+        defaultValue={config.sqlConnectionLimits.maxOpenConns}
+        onChange={onMaxConnectionsChanged}
+        width={labelWidth}
+      />
+    </Field>
+  );
+}