From ae38501675d4cab0d10b0c48a339f33e469d7a4b Mon Sep 17 00:00:00 2001
From: Stephanie Hingtgen <stephanie.hingtgen@grafana.com>
Date: Fri, 17 Mar 2023 07:15:20 -0500
Subject: [PATCH] Plugins: add UI toggle for additional datasources for secure
 socks proxy (#64934)

---
 .../azuremonitor/components/ConfigEditor.tsx         |  8 ++++++--
 .../components/ConfigEditor/ConfigEditor.tsx         |  6 ++++++
 public/app/plugins/datasource/parca/ConfigEditor.tsx |  6 +++++-
 .../app/plugins/datasource/phlare/ConfigEditor.tsx   | 12 +++++++++++-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/azuremonitor/components/ConfigEditor.tsx b/public/app/plugins/datasource/azuremonitor/components/ConfigEditor.tsx
index 826f5d753af..44d647fde49 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/ConfigEditor.tsx
@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 
 import { DataSourcePluginOptionsEditorProps, SelectableValue, updateDatasourcePluginOption } from '@grafana/data';
 import { getBackendSrv, getTemplateSrv, isFetchError, TemplateSrv } from '@grafana/runtime';
-import { Alert } from '@grafana/ui';
+import { Alert, SecureSocksProxySettings } from '@grafana/ui';
+import { config } from 'app/core/config';
 
 import ResponseParser from '../azure_monitor/response_parser';
 import { AzureDataSourceJsonData, AzureDataSourceSecureJsonData, AzureDataSourceSettings } from '../types';
@@ -84,7 +85,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
   };
 
   render() {
-    const { options } = this.props;
+    const { options, onOptionsChange } = this.props;
     const { error } = this.state;
 
     return (
@@ -96,6 +97,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
             {error.details && <details style={{ whiteSpace: 'pre-wrap' }}>{error.details}</details>}
           </Alert>
         )}
+        {config.featureToggles.secureSocksDatasourceProxy && (
+          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+        )}
       </>
     );
   }
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
index 8378bfb0e19..26d7d6a771b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx
@@ -2,6 +2,8 @@ import React, { PureComponent } from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { ConnectionConfig } from '@grafana/google-sdk';
+import { SecureSocksProxySettings } from '@grafana/ui';
+import { config } from 'app/core/config';
 
 import { CloudMonitoringOptions, CloudMonitoringSecureJsonData } from '../../types';
 
@@ -9,9 +11,13 @@ export type Props = DataSourcePluginOptionsEditorProps<CloudMonitoringOptions, C
 
 export class ConfigEditor extends PureComponent<Props> {
   render() {
+    const { options, onOptionsChange } = this.props;
     return (
       <>
         <ConnectionConfig {...this.props}></ConnectionConfig>
+        {config.featureToggles.secureSocksDatasourceProxy && (
+          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+        )}
       </>
     );
   }
diff --git a/public/app/plugins/datasource/parca/ConfigEditor.tsx b/public/app/plugins/datasource/parca/ConfigEditor.tsx
index 72cf481077e..7937c46fcc4 100644
--- a/public/app/plugins/datasource/parca/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/parca/ConfigEditor.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
+import { config } from 'app/core/config';
 
 import { ParcaDataSourceOptions } from './types';
 
@@ -18,6 +19,9 @@ export const ConfigEditor = (props: Props) => {
         showAccessOptions={false}
         onChange={onOptionsChange}
       />
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+      )}
     </>
   );
 };
diff --git a/public/app/plugins/datasource/phlare/ConfigEditor.tsx b/public/app/plugins/datasource/phlare/ConfigEditor.tsx
index 7e4843a2a83..4d8c1583b0f 100644
--- a/public/app/plugins/datasource/phlare/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/phlare/ConfigEditor.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { DataSourceHttpSettings, EventsWithValidation, LegacyForms, regexValidation } from '@grafana/ui';
+import {
+  DataSourceHttpSettings,
+  EventsWithValidation,
+  LegacyForms,
+  regexValidation,
+  SecureSocksProxySettings,
+} from '@grafana/ui';
+import { config } from 'app/core/config';
 
 import { PhlareDataSourceOptions } from './types';
 
@@ -19,6 +26,9 @@ export const ConfigEditor = (props: Props) => {
         onChange={onOptionsChange}
       />
 
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+      )}
       <h3 className="page-heading">Querying</h3>
       <div className="gf-form-group">
         <div className="gf-form-inline">