Plugins: add UI for more supported datasources with secure socks proxy feature toggle (#61962)

packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
+
+import { InlineSwitch } from '../../components/Switch/Switch';
+import { InlineField } from '../Forms/InlineField';
+
+export interface Props<T extends DataSourceJsonData>
+  extends Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'> {}
+
+export interface SecureSocksProxyConfig extends DataSourceJsonData {
+  enableSecureSocksProxy?: boolean;
+}
+
+export function SecureSocksProxySettings<T extends SecureSocksProxyConfig>({
+  options,
+  onOptionsChange,
+}: Props<T>): JSX.Element {
+  return (
+    <>
+      <h3 className="page-heading">Secure Socks Proxy</h3>
+      <div className="gf-form-group">
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <InlineField
+              labelWidth={26}
+              label="Enabled"
+              tooltip="Connect to this datasource via the secure socks proxy."
+            >
+              <InlineSwitch
+                value={options.jsonData.enableSecureSocksProxy ?? false}
+                onChange={(event) =>
+                  onOptionsChange({
+                    ...options,
+                    jsonData: { ...options.jsonData, enableSecureSocksProxy: event!.currentTarget.checked },
+                  })
+                }
+              />
+            </InlineField>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

packages/grafana-ui/src/components/index.ts

@@ -185,6 +185,7 @@ export {
 export { ErrorWithStack } from './ErrorBoundary/ErrorWithStack';
 export { DataSourceHttpSettings } from './DataSourceSettings/DataSourceHttpSettings';
 export { AlertingSettings } from './DataSourceSettings/AlertingSettings';
+export { SecureSocksProxySettings } from './DataSourceSettings/SecureSocksProxySettings';
 export { TLSAuthSettings } from './DataSourceSettings/TLSAuthSettings';
 export { CertificationKey } from './DataSourceSettings/CertificationKey';
 export { Spinner } from './Spinner/Spinner';