From bd320ee0b36b674e2cd75c18899d46df66d99479 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 20 May 2022 16:04:20 +0200 Subject: [PATCH] Auth: Remove grafana ui dependency to the aws sdk (#43559) * remove grafana ui dependency to the aws sdk * wip * cleanup * add tests * point to real version of aws-sdk --- .../DataSourceHttpSettings.test.tsx | 77 +++++++++++++++++++ .../DataSourceHttpSettings.tsx | 5 +- .../DataSourceSettings/SigV4AuthSettings.tsx | 72 ----------------- .../components/DataSourceSettings/types.ts | 2 + .../configuration/ConfigEditor.tsx | 3 +- .../prometheus/configuration/ConfigEditor.tsx | 2 + 6 files changed, 85 insertions(+), 76 deletions(-) create mode 100644 packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx delete mode 100644 packages/grafana-ui/src/components/DataSourceSettings/SigV4AuthSettings.tsx diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx new file mode 100644 index 00000000000..0f072dde808 --- /dev/null +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx @@ -0,0 +1,77 @@ +import { render, screen } from '@testing-library/react'; +import React from 'react'; + +import { DataSourceHttpSettings } from '@grafana/ui'; + +import { HttpSettingsProps } from './types'; + +const setup = (propOverrides?: object) => { + const onChange = jest.fn(); + const props: HttpSettingsProps = { + dataSourceConfig: { + id: 4, + uid: 'x', + orgId: 1, + name: 'gdev-influxdb', + type: 'influxdb', + typeName: 'Influxdb', + typeLogoUrl: '', + access: 'direct', + url: 'http://localhost:8086', + password: '', + user: 'grafana', + database: 'site', + basicAuth: false, + basicAuthUser: '', + basicAuthPassword: '', + withCredentials: false, + isDefault: false, + jsonData: { + timeInterval: '15s', + httpMode: 'GET', + keepCookies: ['cookie1', 'cookie2'], + }, + secureJsonData: { + password: true, + }, + secureJsonFields: {}, + readOnly: true, + }, + onChange, + ...propOverrides, + defaultUrl: '', + }; + + render(); + return { onChange }; +}; + +const SIGV4TestEditor = (props: { renderText: string }) => { + return <>{props.renderText}; +}; + +describe('DataSourceHttpSettings', () => { + it('should render SIGV4 label if SIGV4 is enabled', () => { + setup({ sigV4AuthToggleEnabled: true }); + expect(screen.getByLabelText('SigV4 auth')).toBeInTheDocument(); + }); + + it('should not render SIGV4 label if SIGV4 is not enabled', () => { + setup({ sigV4AuthToggleEnabled: false }); + expect(screen.queryByText('SigV4 auth')).toBeNull(); + }); + + it('should render SIGV4 editor if provided and SIGV4 is enabled', () => { + const expectedText = 'sigv4-test-editor'; + setup({ + sigV4AuthToggleEnabled: true, + renderSigV4Editor: , + dataSourceConfig: { + jsonData: { + sigV4Auth: true, + }, + }, + }); + expect(screen.getByText(expectedText)).toBeInTheDocument(); + }); +}); diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx index f27e2bb2825..f65a405d359 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx @@ -17,7 +17,6 @@ import { TagsInput } from '../TagsInput/TagsInput'; import { BasicAuthSettings } from './BasicAuthSettings'; import { CustomHeadersSettings } from './CustomHeadersSettings'; import { HttpProxySettings } from './HttpProxySettings'; -import { SigV4AuthSettings } from './SigV4AuthSettings'; import { TLSAuthSettings } from './TLSAuthSettings'; import { HttpSettingsProps } from './types'; @@ -71,6 +70,7 @@ export const DataSourceHttpSettings: React.FC = (props) => { sigV4AuthToggleEnabled, showForwardOAuthIdentityOption, azureAuthSettings, + renderSigV4Editor, } = props; let urlTooltip; const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false); @@ -292,8 +292,7 @@ export const DataSourceHttpSettings: React.FC = (props) => { )} - {dataSourceConfig.jsonData.sigV4Auth && sigV4AuthToggleEnabled && } - + {dataSourceConfig.jsonData.sigV4Auth && sigV4AuthToggleEnabled && renderSigV4Editor} {(dataSourceConfig.jsonData.tlsAuth || dataSourceConfig.jsonData.tlsAuthWithCACert) && ( )} diff --git a/packages/grafana-ui/src/components/DataSourceSettings/SigV4AuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/SigV4AuthSettings.tsx deleted file mode 100644 index 965721d9fc1..00000000000 --- a/packages/grafana-ui/src/components/DataSourceSettings/SigV4AuthSettings.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; - -import { - AwsAuthDataSourceSecureJsonData, - AwsAuthDataSourceJsonData, - ConnectionConfig, - ConnectionConfigProps, -} from '@grafana/aws-sdk'; -import { DataSourceSettings } from '@grafana/data'; - -import { HttpSettingsBaseProps } from './types'; - -export const SigV4AuthSettings: React.FC = (props) => { - const { dataSourceConfig, onChange } = props; - - // The @grafana/aws-sdk ConnectionConfig is designed to be rendered in a ConfigEditor, - // taking DataSourcePluginOptionsEditorProps as props. We therefore need to map the props accordingly. - const connectionConfigProps: ConnectionConfigProps = { - onOptionsChange: (awsDataSourceSettings) => { - const dataSourceSettings: DataSourceSettings = { - ...dataSourceConfig, - jsonData: { - ...dataSourceConfig.jsonData, - sigV4AuthType: awsDataSourceSettings.jsonData.authType, - sigV4Profile: awsDataSourceSettings.jsonData.profile, - sigV4AssumeRoleArn: awsDataSourceSettings.jsonData.assumeRoleArn, - sigV4ExternalId: awsDataSourceSettings.jsonData.externalId, - sigV4Region: awsDataSourceSettings.jsonData.defaultRegion, - sigV4Endpoint: awsDataSourceSettings.jsonData.endpoint, - }, - secureJsonFields: { - sigV4AccessKey: awsDataSourceSettings.secureJsonFields?.accessKey, - sigV4SecretKey: awsDataSourceSettings.secureJsonFields?.secretKey, - }, - secureJsonData: { - sigV4AccessKey: awsDataSourceSettings.secureJsonData?.accessKey, - sigV4SecretKey: awsDataSourceSettings.secureJsonData?.secretKey, - }, - }; - onChange(dataSourceSettings); - }, - options: { - ...dataSourceConfig, - jsonData: { - ...dataSourceConfig.jsonData, - authType: dataSourceConfig.jsonData.sigV4AuthType, - profile: dataSourceConfig.jsonData.sigV4Profile, - assumeRoleArn: dataSourceConfig.jsonData.sigV4AssumeRoleArn, - externalId: dataSourceConfig.jsonData.sigV4ExternalId, - defaultRegion: dataSourceConfig.jsonData.sigV4Region, - endpoint: dataSourceConfig.jsonData.sigV4Endpoint, - }, - secureJsonFields: { - accessKey: dataSourceConfig.secureJsonFields?.sigV4AccessKey, - secretKey: dataSourceConfig.secureJsonFields?.sigV4SecretKey, - }, - secureJsonData: { - accessKey: dataSourceConfig.secureJsonData?.sigV4AccessKey, - secretKey: dataSourceConfig.secureJsonData?.sigV4SecretKey, - }, - }, - }; - - return ( - <> -
-
SigV4 Auth Details
-
- - - ); -}; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/types.ts b/packages/grafana-ui/src/components/DataSourceSettings/types.ts index c5c2cc4789a..8190332383d 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/types.ts +++ b/packages/grafana-ui/src/components/DataSourceSettings/types.ts @@ -37,4 +37,6 @@ export interface HttpSettingsProps extends HttpSettingsBaseProps { sigV4AuthToggleEnabled?: boolean; /** Azure authentication settings **/ azureAuthSettings?: AzureAuthSettings; + /** If SIGV4 is enabled, provide an editor for SIGV4 connection config **/ + renderSigV4Editor?: React.ReactNode; } diff --git a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx index 20a16e1ecf7..df512e5b7e0 100644 --- a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx +++ b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; +import { SIGV4ConnectionConfig } from '@grafana/aws-sdk'; import { DataSourcePluginOptionsEditorProps } from '@grafana/data'; import { Alert, DataSourceHttpSettings } from '@grafana/ui'; import { config } from 'app/core/config'; @@ -41,13 +42,13 @@ export const ConfigEditor = (props: Props) => { {`Support for Elasticsearch versions after their end-of-life (currently versions < 7.10) was removed`} )} - } /> diff --git a/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx index 1f10fde398f..692e7cfe24d 100644 --- a/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx +++ b/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import { SIGV4ConnectionConfig } from '@grafana/aws-sdk'; import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data'; import { AlertingSettings, DataSourceHttpSettings, Alert } from '@grafana/ui'; import { config } from 'app/core/config'; @@ -39,6 +40,7 @@ export const ConfigEditor = (props: Props) => { onChange={onOptionsChange} sigV4AuthToggleEnabled={config.sigV4AuthEnabled} azureAuthSettings={azureAuthSettings} + renderSigV4Editor={} />