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,
+  Divider,
-  InlineField,
+  Field,
-  InlineFieldRow,
+  Icon,
-  InlineSwitch,
   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}>
+      <DataSourceDescription
-        <InlineField labelWidth={WIDTH_SHORT} label="Host">
+        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>
+        </Field>
-        <InlineField labelWidth={WIDTH_SHORT} label="Database">
+      </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>
+        </Field>
-        <InlineFieldRow>
+
-          <InlineField labelWidth={WIDTH_SHORT} label="User">
+        <Field label="Username">
-            <Input
-              width={WIDTH_SHORT}
-              value={options.user || ''}
-              placeholder="user"
-              onChange={onDSOptionChanged('user')}
-            ></Input>
-          </InlineField>
-          <InlineField labelWidth={WIDTH_SHORT - 5} label="Password">
-            <SecretInput
-              width={WIDTH_SHORT}
-              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}
+            width={WIDTH_LONG}
-            value={jsonData.timezone || ''}
+            value={options.user || ''}
-            onChange={onUpdateDatasourceJsonDataOption(props, 'timezone')}
+            placeholder="Username"
-            placeholder="(default)"
+            onChange={onDSOptionChanged('user')}
-          ></Input>
+          />
-        </InlineField>
+        </Field>
-        <InlineFieldRow>
+
-          <InlineField
+        <Field label="Password">
-            labelWidth={WIDTH_MEDIUM}
+          <SecretInput
-            tooltip="Enables TLS authentication using client cert configured in secure json data."
+            width={WIDTH_LONG}
-            htmlFor="tlsAuth"
+            placeholder="Password"
-            label="Use TLS Client Auth"
+            isConfigured={options.secureJsonFields && options.secureJsonFields.password}
-          >
+            onReset={onResetPassword}
-            <InlineSwitch
+            onBlur={onUpdateDatasourceSecureJsonDataOption(props, 'password')}
-              id="tlsAuth"
+          />
-              onChange={onSwitchChanged('tlsAuth')}
+        </Field>
-              value={jsonData.tlsAuth || false}
+
-            ></InlineSwitch>
+        <Field
-          </InlineField>
+          label="Use TLS Client Auth"
-          <InlineField
+          description="Enables TLS authentication using client cert configured in secure json data."
-            labelWidth={WIDTH_MEDIUM}
+        >
-            tooltip="Needed for verifing self-signed TLS Certs."
+          <Switch onChange={onSwitchChanged('tlsAuth')} value={jsonData.tlsAuth || false} />
-            htmlFor="tlsCaCert"
+        </Field>
-            label="With CA Cert"
+
-          >
+        <Field label="With CA Cert" description="Needed for verifying self-signed TLS Certs.">
-            <InlineSwitch
+          <Switch onChange={onSwitchChanged('tlsAuthWithCACert')} value={jsonData.tlsAuthWithCACert || false} />
-              id="tlsCaCert"
+        </Field>
-              onChange={onSwitchChanged('tlsAuthWithCACert')}
+
-              value={jsonData.tlsAuthWithCACert || false}
+        <Field
-            ></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"
           label="Skip TLS Verification"
+          description="When enabled, skips verification of the MySQL server's TLS certificate chain and host name."
         >
-          <InlineSwitch
+          <Switch onChange={onSwitchChanged('tlsSkipVerify')} value={jsonData.tlsSkipVerify || false} />
-            id="skipTLSVerify"
+        </Field>
-            onChange={onSwitchChanged('tlsSkipVerify')}
+
-            value={jsonData.tlsSkipVerify || false}
+        <Field
-          ></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"
           label="Allow Cleartext Passwords"
+          description="Allows using the cleartext client side plugin if required by an account."
         >
-          <InlineSwitch
+          <Switch
-            id="allowCleartextPasswords"
             onChange={onSwitchChanged('allowCleartextPasswords')}
             value={jsonData.allowCleartextPasswords || false}
-          ></InlineSwitch>
+          />
-        </InlineField>
+        </Field>
-      </FieldSet>
+      </ConfigSection>
 
       {config.secureSocksDSProxyEnabled && (
-        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+        <>
+          <Divider />
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+        </>
       )}
+
       {jsonData.tlsAuth || jsonData.tlsAuthWithCACert ? (
-        <FieldSet label="TLS/SSL Auth Details">
+        <>
-          <TLSSecretsConfig
+          <Divider />
-            showCACert={jsonData.tlsAuthWithCACert}
+
-            showKeyPair={jsonData.tlsAuth}
+          <ConfigSection title="TLS/SSL Auth Details">
-            editorProps={props}
+            {jsonData.tlsAuth || jsonData.tlsAuthWithCACert ? (
-            labelWidth={25}
+              <TLSSecretsConfig
-          ></TLSSecretsConfig>
+                showCACert={jsonData.tlsAuthWithCACert}
-        </FieldSet>
+                showKeyPair={jsonData.tlsAuth}
+                editorProps={props}
+                labelWidth={25}
+              />
+            ) : null}
+          </ConfigSection>
+        </>
       ) : null}
 
-      <ConnectionLimits labelWidth={WIDTH_SHORT} options={options} onOptionsChange={onOptionsChange} />
+      <Divider />
 
-      <FieldSet label="MySQL details">
+      <ConfigSection title="Additional settings">
-        <InlineField
+        <Field
-          tooltip={
+          label={
-            <span>
+            <Label>
-              A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example
+              <Stack gap={0.5}>
-              <code>1m</code> if your data is written every minute.
+                <span>Session timezone</span>
-            </span>
+                <Tooltip
+                  content={
+                    <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>
+                  }
+                >
+                  <Icon name="info-circle" size="sm" />
+                </Tooltip>
+              </Stack>
+            </Label>
           }
-          labelWidth={WIDTH_MEDIUM}
-          label="Min time interval"
         >
           <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>
+                  }
+                >
+                  <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>
+        </Field>
-      </FieldSet>
+      </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