MySQL: Update configuration page styling (#74902)

* config page update

* move SecureSocksProxySettings out of tls/ssl

public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx

@@ -7,16 +7,19 @@ import {
   updateDatasourcePluginJsonDataOption,
   updateDatasourcePluginResetOption,
 } from '@grafana/data';
+import { ConfigSection, DataSourceDescription, Stack } from '@grafana/experimental';
 import {
   Alert,
-  FieldSet,
-  InlineField,
-  InlineFieldRow,
-  InlineSwitch,
+  Divider,
+  Field,
+  Icon,
   Input,
+  Label,
   Link,
   SecretInput,
   SecureSocksProxySettings,
+  Switch,
+  Tooltip,
 } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { ConnectionLimits } from 'app/features/plugins/sql/components/configuration/ConnectionLimits';
@@ -48,13 +51,20 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
   };
 
   const WIDTH_SHORT = 15;
-  const WIDTH_MEDIUM = 25;
   const WIDTH_LONG = 40;
 
   return (
     <>
-      <FieldSet label="MySQL Connection" width={400}>
-        <InlineField labelWidth={WIDTH_SHORT} label="Host">
+      <DataSourceDescription
+        dataSourceName="MySQL"
+        docsLink="https://grafana.com/docs/grafana/latest/datasources/mysql/"
+        hasRequiredFields={false}
+      />
+
+      <Divider />
+
+      <ConfigSection title="Connection">
+        <Field label="Host URL" required>
           <Input
             width={WIDTH_LONG}
             name="host"
@@ -62,150 +72,165 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
             value={options.url || ''}
             placeholder="localhost:3306"
             onChange={onDSOptionChanged('url')}
-          ></Input>
-        </InlineField>
-        <InlineField labelWidth={WIDTH_SHORT} label="Database">
+          />
+        </Field>
+      </ConfigSection>
+
+      <Divider />
+
+      <ConfigSection title="Authentication">
+        <Field label="Database name">
           <Input
             width={WIDTH_LONG}
             name="database"
             value={jsonData.database || ''}
-            placeholder="database name"
+            placeholder="Database"
             onChange={onUpdateDatasourceJsonDataOption(props, 'database')}
-          ></Input>
-        </InlineField>
-        <InlineFieldRow>
-          <InlineField labelWidth={WIDTH_SHORT} label="User">
+          />
+        </Field>
+
+        <Field label="Username">
           <Input
-              width={WIDTH_SHORT}
+            width={WIDTH_LONG}
             value={options.user || ''}
-              placeholder="user"
+            placeholder="Username"
             onChange={onDSOptionChanged('user')}
-            ></Input>
-          </InlineField>
-          <InlineField labelWidth={WIDTH_SHORT - 5} label="Password">
+          />
+        </Field>
+
+        <Field label="Password">
           <SecretInput
-              width={WIDTH_SHORT}
+            width={WIDTH_LONG}
             placeholder="Password"
             isConfigured={options.secureJsonFields && options.secureJsonFields.password}
             onReset={onResetPassword}
             onBlur={onUpdateDatasourceSecureJsonDataOption(props, 'password')}
-            ></SecretInput>
-          </InlineField>
-        </InlineFieldRow>
-        <InlineField
-          tooltip={
-            <span>
-              Specify the time zone used in the database session, e.g. <code>Europe/Berlin</code> or
-              <code>+02:00</code>. This is necessary, if the timezone of the database (or the host of the database) is
-              set to something other than UTC. The value is set in the session with
-              <code>SET time_zone=&apos;...&apos;</code>. If you leave this field empty, the timezone is not updated.
-              You can find more information in the MySQL documentation.
-            </span>
-          }
-          label="Session timezone"
-          labelWidth={WIDTH_MEDIUM}
-        >
-          <Input
-            width={WIDTH_LONG - 5}
-            value={jsonData.timezone || ''}
-            onChange={onUpdateDatasourceJsonDataOption(props, 'timezone')}
-            placeholder="(default)"
-          ></Input>
-        </InlineField>
-        <InlineFieldRow>
-          <InlineField
-            labelWidth={WIDTH_MEDIUM}
-            tooltip="Enables TLS authentication using client cert configured in secure json data."
-            htmlFor="tlsAuth"
+          />
+        </Field>
+
+        <Field
           label="Use TLS Client Auth"
+          description="Enables TLS authentication using client cert configured in secure json data."
         >
-            <InlineSwitch
-              id="tlsAuth"
-              onChange={onSwitchChanged('tlsAuth')}
-              value={jsonData.tlsAuth || false}
-            ></InlineSwitch>
-          </InlineField>
-          <InlineField
-            labelWidth={WIDTH_MEDIUM}
-            tooltip="Needed for verifing self-signed TLS Certs."
-            htmlFor="tlsCaCert"
-            label="With CA Cert"
-          >
-            <InlineSwitch
-              id="tlsCaCert"
-              onChange={onSwitchChanged('tlsAuthWithCACert')}
-              value={jsonData.tlsAuthWithCACert || false}
-            ></InlineSwitch>
-          </InlineField>
-        </InlineFieldRow>
-        <InlineField
-          labelWidth={WIDTH_MEDIUM}
-          tooltip="When enabled, skips verification of the MySql server's TLS certificate chain and host name."
-          htmlFor="skipTLSVerify"
+          <Switch onChange={onSwitchChanged('tlsAuth')} value={jsonData.tlsAuth || false} />
+        </Field>
+
+        <Field label="With CA Cert" description="Needed for verifying self-signed TLS Certs.">
+          <Switch onChange={onSwitchChanged('tlsAuthWithCACert')} value={jsonData.tlsAuthWithCACert || false} />
+        </Field>
+
+        <Field
           label="Skip TLS Verification"
+          description="When enabled, skips verification of the MySQL server's TLS certificate chain and host name."
         >
-          <InlineSwitch
-            id="skipTLSVerify"
-            onChange={onSwitchChanged('tlsSkipVerify')}
-            value={jsonData.tlsSkipVerify || false}
-          ></InlineSwitch>
-        </InlineField>
-        <InlineField
-          labelWidth={WIDTH_MEDIUM}
-          tooltip={
-            <span>
-              Allows using the cleartext client side plugin if required by an account, such as one defined with the PAM
-              authentication plugin. Sending passwords in clear text may be a security problem in some configurations.
-              To avoid problems if there is any possibility that the password would be intercepted, clients should
-              connect to MySQL Server using a method that protects the password. Possibilities include TLS / SSL, IPsec,
-              or a private network.
-            </span>
-          }
-          htmlFor="allowCleartextPasswords"
+          <Switch onChange={onSwitchChanged('tlsSkipVerify')} value={jsonData.tlsSkipVerify || false} />
+        </Field>
+
+        <Field
           label="Allow Cleartext Passwords"
+          description="Allows using the cleartext client side plugin if required by an account."
         >
-          <InlineSwitch
-            id="allowCleartextPasswords"
+          <Switch
             onChange={onSwitchChanged('allowCleartextPasswords')}
             value={jsonData.allowCleartextPasswords || false}
-          ></InlineSwitch>
-        </InlineField>
-      </FieldSet>
+          />
+        </Field>
+      </ConfigSection>
 
+      {config.secureSocksDSProxyEnabled && (
+        <>
+          <Divider />
           {config.secureSocksDSProxyEnabled && (
             <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
           )}
+        </>
+      )}
+
+      {jsonData.tlsAuth || jsonData.tlsAuthWithCACert ? (
+        <>
+          <Divider />
+
+          <ConfigSection title="TLS/SSL Auth Details">
             {jsonData.tlsAuth || jsonData.tlsAuthWithCACert ? (
-        <FieldSet label="TLS/SSL Auth Details">
               <TLSSecretsConfig
                 showCACert={jsonData.tlsAuthWithCACert}
                 showKeyPair={jsonData.tlsAuth}
                 editorProps={props}
                 labelWidth={25}
-          ></TLSSecretsConfig>
-        </FieldSet>
+              />
+            ) : null}
+          </ConfigSection>
+        </>
       ) : null}
 
-      <ConnectionLimits labelWidth={WIDTH_SHORT} options={options} onOptionsChange={onOptionsChange} />
+      <Divider />
 
-      <FieldSet label="MySQL details">
-        <InlineField
-          tooltip={
+      <ConfigSection title="Additional settings">
+        <Field
+          label={
+            <Label>
+              <Stack gap={0.5}>
+                <span>Session timezone</span>
+                <Tooltip
+                  content={
                     <span>
-              A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example
+                      Specify the time zone used in the database session, e.g. <code>Europe/Berlin</code> or
+                      <code>+02:00</code>. This is necessary, if the timezone of the database (or the host of the
+                      database) is set to something other than UTC. The value is set in the session with
+                      <code>SET time_zone=&apos;...&apos;</code>. If you leave this field empty, the timezone is not
+                      updated. You can find more information in the MySQL documentation.
+                    </span>
+                  }
+                >
+                  <Icon name="info-circle" size="sm" />
+                </Tooltip>
+              </Stack>
+            </Label>
+          }
+        >
+          <Input
+            width={WIDTH_LONG}
+            value={jsonData.timezone || ''}
+            onChange={onUpdateDatasourceJsonDataOption(props, 'timezone')}
+            placeholder="Europe/Berlin or +02:00"
+          />
+        </Field>
+
+        <Field
+          label={
+            <Label>
+              <Stack gap={0.5}>
+                <span>Min time interval</span>
+                <Tooltip
+                  content={
+                    <span>
+                      A lower limit for the auto group by time interval. Recommended to be set to write frequency, for
+                      example
                       <code>1m</code> if your data is written every minute.
                     </span>
                   }
-          labelWidth={WIDTH_MEDIUM}
-          label="Min time interval"
+                >
+                  <Icon name="info-circle" size="sm" />
+                </Tooltip>
+              </Stack>
+            </Label>
+          }
+          description="A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example 1m if your data is written every minute."
         >
           <Input
+            width={WIDTH_LONG}
             placeholder="1m"
             value={jsonData.timeInterval || ''}
             onChange={onUpdateDatasourceJsonDataOption(props, 'timeInterval')}
-          ></Input>
-        </InlineField>
-      </FieldSet>
+          />
+        </Field>
+      </ConfigSection>
+
+      <Divider />
+
+      <ConnectionLimits labelWidth={WIDTH_SHORT} options={options} onOptionsChange={onOptionsChange} />
+
+      <Divider />
 
       <Alert title="User Permission" severity="info">
         The database user should only be granted SELECT permissions on the specified database &amp; tables you want to