MySQL: make it possible to add CA cert without using tlsAuth (#58226)

public/app/features/plugins/sql/components/configuration/TLSSecretsConfig.tsx

@@ -12,31 +12,36 @@ import { InlineField, SecretTextArea } from '@grafana/ui';
 export interface Props<T extends DataSourceJsonData, S> {
   editorProps: DataSourcePluginOptionsEditorProps<T, S>;
   showCACert?: boolean;
+  showKeyPair?: boolean;
   secureJsonFields?: KeyValue<Boolean>;
   labelWidth?: number;
 }
 
 export const TLSSecretsConfig = <T extends DataSourceJsonData, S extends {} = {}>(props: Props<T, S>) => {
-  const { labelWidth, editorProps, showCACert } = props;
+  const { labelWidth, editorProps, showCACert, showKeyPair = true } = props;
   const { secureJsonFields } = editorProps.options;
   return (
     <>
-      <InlineField
-        tooltip={<span>To authenticate with an TLS/SSL client certificate, provide the client certificate here.</span>}
-        labelWidth={labelWidth}
-        label="TLS/SSL Client Certificate"
-      >
-        <SecretTextArea
-          placeholder="Begins with -----BEGIN CERTIFICATE-----"
-          cols={45}
-          rows={7}
-          isConfigured={secureJsonFields && secureJsonFields.tlsClientCert}
-          onChange={onUpdateDatasourceSecureJsonDataOption(editorProps, 'tlsClientCert')}
-          onReset={() => {
-            updateDatasourcePluginResetOption(editorProps, 'tlsClientCert');
-          }}
-        ></SecretTextArea>
-      </InlineField>
+      {showKeyPair ? (
+        <InlineField
+          tooltip={
+            <span>To authenticate with an TLS/SSL client certificate, provide the client certificate here.</span>
+          }
+          labelWidth={labelWidth}
+          label="TLS/SSL Client Certificate"
+        >
+          <SecretTextArea
+            placeholder="Begins with -----BEGIN CERTIFICATE-----"
+            cols={45}
+            rows={7}
+            isConfigured={secureJsonFields && secureJsonFields.tlsClientCert}
+            onChange={onUpdateDatasourceSecureJsonDataOption(editorProps, 'tlsClientCert')}
+            onReset={() => {
+              updateDatasourcePluginResetOption(editorProps, 'tlsClientCert');
+            }}
+          ></SecretTextArea>
+        </InlineField>
+      ) : null}
       {showCACert ? (
         <InlineField
           tooltip={<span>If the selected TLS/SSL mode requires a server root certificate, provide it here.</span>}
@@ -55,23 +60,24 @@ export const TLSSecretsConfig = <T extends DataSourceJsonData, S extends {} = {}
           ></SecretTextArea>
         </InlineField>
       ) : null}
-
-      <InlineField
-        tooltip={<span>To authenticate with a client TLS/SSL certificate, provide the key here.</span>}
-        labelWidth={labelWidth}
-        label="TLS/SSL Client Key"
-      >
-        <SecretTextArea
-          placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
-          cols={45}
-          rows={7}
-          isConfigured={secureJsonFields && secureJsonFields.tlsClientKey}
-          onChange={onUpdateDatasourceSecureJsonDataOption(editorProps, 'tlsClientKey')}
-          onReset={() => {
-            updateDatasourcePluginResetOption(editorProps, 'tlsClientKey');
-          }}
-        ></SecretTextArea>
-      </InlineField>
+      {showKeyPair ? (
+        <InlineField
+          tooltip={<span>To authenticate with a client TLS/SSL certificate, provide the key here.</span>}
+          labelWidth={labelWidth}
+          label="TLS/SSL Client Key"
+        >
+          <SecretTextArea
+            placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
+            cols={45}
+            rows={7}
+            isConfigured={secureJsonFields && secureJsonFields.tlsClientKey}
+            onChange={onUpdateDatasourceSecureJsonDataOption(editorProps, 'tlsClientKey')}
+            onReset={() => {
+              updateDatasourcePluginResetOption(editorProps, 'tlsClientKey');
+            }}
+          ></SecretTextArea>
+        </InlineField>
+      ) : null}
     </>
   );
 };

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

@@ -128,10 +128,11 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
         </InlineField>
       </FieldSet>
 
-      {options.jsonData.tlsAuth ? (
+      {jsonData.tlsAuth || jsonData.tlsAuthWithCACert ? (
         <FieldSet label="TLS/SSL Auth Details">
           <TLSSecretsConfig
             showCACert={jsonData.tlsAuthWithCACert}
+            showKeyPair={jsonData.tlsAuth}
             editorProps={props}
             labelWidth={25}
           ></TLSSecretsConfig>