From 8415dd40d7d22783251677989ae7647ca1a1bfc1 Mon Sep 17 00:00:00 2001 From: Ivan Ortega Alba Date: Wed, 26 Jul 2023 18:40:51 +0200 Subject: [PATCH] DSPicker: Use new DS picker everywhere in Grafana (#70609) --- .betterer.results | 3 --- .../new-query-variable.spec.ts | 11 ++++----- .../src/selectors/components.ts | 2 +- .../src/components/DataSourcePicker.tsx | 3 ++- .../TraceToLogs/TraceToLogsSettings.tsx | 2 +- .../TraceToMetrics/TraceToMetricsSettings.tsx | 5 ++-- .../rule-editor/CloudRulesSourcePicker.tsx | 12 ++-------- .../Forms/ConfigureCorrelationSourceForm.tsx | 2 +- .../Forms/ConfigureCorrelationTargetForm.tsx | 2 +- .../AnnotationSettingsEdit.tsx | 3 ++- .../picker/DataSourceDropdown.test.tsx | 23 +++++++++++++++---- .../components/picker/DataSourceDropdown.tsx | 1 + .../components/ImportDashboardForm.tsx | 2 +- .../components/QueryEditorRowHeader.test.tsx | 2 +- .../adhoc/AdHocVariableEditor.test.tsx | 6 +++-- .../variables/adhoc/AdHocVariableEditor.tsx | 2 +- .../variables/query/QueryVariableEditor.tsx | 3 ++- .../cloudwatch/components/XrayLinkConfig.tsx | 6 ++--- .../elasticsearch/configuration/DataLink.tsx | 6 ++--- .../loki/configuration/DerivedField.test.tsx | 4 ++-- .../loki/configuration/DerivedField.tsx | 6 ++--- .../configuration/ExemplarSetting.tsx | 5 ++-- .../configuration/LokiSearchSettings.tsx | 10 +++++--- .../configuration/ServiceGraphSettings.tsx | 10 +++++--- public/app/plugins/panel/alertlist/module.tsx | 7 +++--- 25 files changed, 78 insertions(+), 60 deletions(-) diff --git a/.betterer.results b/.betterer.results index 7e0ee1091bd..1b66f1cfdac 100644 --- a/.betterer.results +++ b/.betterer.results @@ -792,9 +792,6 @@ exports[`better eslint`] = { "packages/grafana-runtime/src/analytics/types.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/grafana-runtime/src/components/DataSourcePicker.tsx:5381": [ - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] - ], "packages/grafana-runtime/src/components/PanelRenderer.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], diff --git a/e2e/dashboards-suite/new-query-variable.spec.ts b/e2e/dashboards-suite/new-query-variable.spec.ts index 2bae25ad442..3a1a4712d78 100644 --- a/e2e/dashboards-suite/new-query-variable.spec.ts +++ b/e2e/dashboards-suite/new-query-variable.spec.ts @@ -38,10 +38,9 @@ describe('Variables - Query - Add variable', () => { e2e().get('label').contains('Show on dashboard').should('be.visible'); e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect() - .should('be.visible') - .within((select) => { - e2e.components.Select.singleValue().should('have.text', 'gdev-testdata'); - }); + .get('input[placeholder="gdev-testdata"]') + .scrollIntoView() + .should('be.visible'); e2e().get('label').contains('Refresh').scrollIntoView().should('be.visible'); e2e().get('label').contains('On dashboard load').scrollIntoView().should('be.visible'); @@ -89,7 +88,7 @@ describe('Variables - Query - Add variable', () => { e2e().get('[placeholder="Descriptive text"]').should('be.visible').clear().type('a description'); - e2e.components.DataSourcePicker.inputV2().should('be.visible').type('gdev-testdata{enter}'); + e2e.components.DataSourcePicker.container().should('be.visible').type('gdev-testdata{enter}'); e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput() .should('be.visible') @@ -137,7 +136,7 @@ describe('Variables - Query - Add variable', () => { e2e().get('[placeholder="Descriptive text"]').should('be.visible').clear().type('a description'); - e2e.components.DataSourcePicker.inputV2().type('gdev-testdata{enter}'); + e2e.components.DataSourcePicker.container().type('gdev-testdata{enter}'); e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput() .should('be.visible') diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 572988f638a..3df323cd340 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -307,7 +307,7 @@ export const Components = { * @deprecated use inputV2 instead */ input: () => 'input[id="data-source-picker"]', - inputV2: 'Select a data source', + inputV2: 'data-testid Select a data source', }, TimeZonePicker: { /** diff --git a/packages/grafana-runtime/src/components/DataSourcePicker.tsx b/packages/grafana-runtime/src/components/DataSourcePicker.tsx index 8d527350366..b53e83f124d 100644 --- a/packages/grafana-runtime/src/components/DataSourcePicker.tsx +++ b/packages/grafana-runtime/src/components/DataSourcePicker.tsx @@ -188,7 +188,8 @@ export class DataSourcePicker extends PureComponent + onChange={(ds: DataSourceInstanceSettings) => updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', { ...options.jsonData.tracesToMetrics, datasourceUid: ds.uid, diff --git a/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx index 0b255db5692..cd2c21eb57b 100644 --- a/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/CloudRulesSourcePicker.tsx @@ -2,7 +2,7 @@ import React, { useCallback } from 'react'; import { useAsync } from 'react-use'; import { DataSourceInstanceSettings } from '@grafana/data'; -import { DataSourcePicker } from '@grafana/runtime'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { dispatch } from 'app/store/store'; import { useRulesSourcesWithRuler } from '../../hooks/useRuleSourcesWithRuler'; @@ -28,14 +28,6 @@ export function CloudRulesSourcePicker({ value, ...props }: Props): JSX.Element ); return ( - + ); } diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx index f692b547d02..5e3aed350a8 100644 --- a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx +++ b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx @@ -3,8 +3,8 @@ import React from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data'; -import { DataSourcePicker } from '@grafana/runtime'; import { Card, Field, FieldSet, Input, useStyles2 } from '@grafana/ui'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getVariableUsageInfo } from '../../explore/utils/links'; diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx index 2643e7cfb49..9b66bea2a4b 100644 --- a/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx +++ b/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { DataSourceInstanceSettings } from '@grafana/data'; -import { DataSourcePicker } from '@grafana/runtime'; import { Field, FieldSet } from '@grafana/ui'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { QueryEditorField } from './QueryEditorField'; import { useCorrelationsFormContext } from './correlationsFormContext'; diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx index 2cf14413013..1e1daac9c33 100644 --- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx +++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx @@ -11,7 +11,7 @@ import { } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { Stack } from '@grafana/experimental'; -import { DataSourcePicker, getDataSourceSrv, locationService } from '@grafana/runtime'; +import { getDataSourceSrv, locationService } from '@grafana/runtime'; import { AnnotationPanelFilter } from '@grafana/schema/src/raw/dashboard/x/dashboard_types.gen'; import { Button, @@ -27,6 +27,7 @@ import { import { ColorValueEditor } from 'app/core/components/OptionsUI/color'; import config from 'app/core/config'; import StandardAnnotationQueryEditor from 'app/features/annotations/components/StandardAnnotationQueryEditor'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { DashboardModel } from '../../state/DashboardModel'; diff --git a/public/app/features/datasources/components/picker/DataSourceDropdown.test.tsx b/public/app/features/datasources/components/picker/DataSourceDropdown.test.tsx index aac37c4968c..5b9ba51f778 100644 --- a/public/app/features/datasources/components/picker/DataSourceDropdown.test.tsx +++ b/public/app/features/datasources/components/picker/DataSourceDropdown.test.tsx @@ -4,6 +4,7 @@ import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup'; import React from 'react'; import { DataSourceInstanceSettings, DataSourcePluginMeta, PluginMetaInfo, PluginType } from '@grafana/data'; +import { selectors } from '@grafana/e2e-selectors'; import { ModalRoot, ModalsProvider } from '@grafana/ui'; import config from 'app/core/config'; import { defaultFileUploadQuery } from 'app/plugins/datasource/grafana/types'; @@ -145,7 +146,10 @@ describe('DataSourceDropdown', () => { it('should display the current selected DS in the selector', async () => { getInstanceSettingsMock.mockReturnValue(mockDS2); render(); - expect(screen.getByTestId('Select a data source')).toHaveAttribute('placeholder', mockDS2.name); + expect(screen.getByTestId(selectors.components.DataSourcePicker.inputV2)).toHaveAttribute( + 'placeholder', + mockDS2.name + ); expect(screen.getByAltText(`${mockDS2.meta.name} logo`)).toBeVisible(); }); @@ -166,7 +170,10 @@ describe('DataSourceDropdown', () => { it('should display the default DS as selected when `current` is not set', async () => { getInstanceSettingsMock.mockReturnValue(mockDS2); render(); - expect(screen.getByTestId('Select a data source')).toHaveAttribute('placeholder', mockDS2.name); + expect(screen.getByTestId(selectors.components.DataSourcePicker.inputV2)).toHaveAttribute( + 'placeholder', + mockDS2.name + ); expect(screen.getByAltText(`${mockDS2.meta.name} logo`)).toBeVisible(); }); @@ -180,12 +187,15 @@ describe('DataSourceDropdown', () => { it('should disable the dropdown when `disabled` is true', () => { render(); - expect(screen.getByTestId('Select a data source')).toBeDisabled(); + expect(screen.getByTestId(selectors.components.DataSourcePicker.inputV2)).toBeDisabled(); }); it('should assign the correct `id` to the input element to pair it with a label', () => { render(); - expect(screen.getByTestId('Select a data source')).toHaveAttribute('id', 'custom.input.id'); + expect(screen.getByTestId(selectors.components.DataSourcePicker.inputV2)).toHaveAttribute( + 'id', + 'custom.input.id' + ); }); it('should not set the default DS when setting `noDefault` to true and `current` is not provided', () => { @@ -195,7 +205,10 @@ describe('DataSourceDropdown', () => { // Doesn't try to get the default DS expect(getListMock).not.toBeCalled(); expect(getInstanceSettingsMock).not.toBeCalled(); - expect(screen.getByTestId('Select a data source')).toHaveAttribute('placeholder', 'Select data source'); + expect(screen.getByTestId(selectors.components.DataSourcePicker.inputV2)).toHaveAttribute( + 'placeholder', + 'Select data source' + ); }); }); diff --git a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx index 7d0e99d3caa..39fa1071752 100644 --- a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx +++ b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx @@ -197,6 +197,7 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) { id={inputId || 'data-source-picker'} className={inputHasFocus ? undefined : styles.input} data-testid={selectors.components.DataSourcePicker.inputV2} + aria-label="Select a data source" prefix={currentValue ? prefixIcon : undefined} suffix={} placeholder={hideTextValue ? '' : dataSourceLabel(currentValue) || placeholder} diff --git a/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx b/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx index 1e735327472..61a1e185d36 100644 --- a/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx +++ b/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react'; import { selectors } from '@grafana/e2e-selectors'; -import { DataSourcePicker } from '@grafana/runtime'; import { ExpressionDatasourceRef } from '@grafana/runtime/src/utils/DataSourceWithBackend'; import { Button, @@ -15,6 +14,7 @@ import { Legend, } from '@grafana/ui'; import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { DashboardInput, diff --git a/public/app/features/query/components/QueryEditorRowHeader.test.tsx b/public/app/features/query/components/QueryEditorRowHeader.test.tsx index c94fb627b03..a3fdae682bf 100644 --- a/public/app/features/query/components/QueryEditorRowHeader.test.tsx +++ b/public/app/features/query/components/QueryEditorRowHeader.test.tsx @@ -83,7 +83,7 @@ describe('QueryEditorRowHeader', () => { it('should render variables in the data source picker', async () => { renderScenario({ onChangeDataSource: () => {} }); - const dsSelect = screen.getByLabelText(selectors.components.DataSourcePicker.inputV2); + const dsSelect = screen.getByTestId(selectors.components.DataSourcePicker.container).querySelector('input')!; openMenu(dsSelect); expect(await screen.findByText('${dsVariable}')).toBeInTheDocument(); }); diff --git a/public/app/features/variables/adhoc/AdHocVariableEditor.test.tsx b/public/app/features/variables/adhoc/AdHocVariableEditor.test.tsx index 66caf9b4cbc..cc4ae6e0bfb 100644 --- a/public/app/features/variables/adhoc/AdHocVariableEditor.test.tsx +++ b/public/app/features/variables/adhoc/AdHocVariableEditor.test.tsx @@ -60,12 +60,14 @@ describe('AdHocVariableEditor', () => { it('has a datasource select menu', async () => { render(); - expect(await screen.findByLabelText(selectors.components.DataSourcePicker.inputV2)).toBeInTheDocument(); + expect(await screen.getByTestId(selectors.components.DataSourcePicker.container)).toBeInTheDocument(); }); it('calls the callback when changing the datasource', async () => { render(); - const selectEl = screen.getByLabelText(selectors.components.DataSourcePicker.inputV2); + const selectEl = screen + .getByTestId(selectors.components.DataSourcePicker.container) + .getElementsByTagName('input')[0]; await selectOptionInTest(selectEl, 'Loki'); expect(props.changeVariableDatasource).toBeCalledWith( diff --git a/public/app/features/variables/adhoc/AdHocVariableEditor.tsx b/public/app/features/variables/adhoc/AdHocVariableEditor.tsx index c5f02f0d712..659fd7869c5 100644 --- a/public/app/features/variables/adhoc/AdHocVariableEditor.tsx +++ b/public/app/features/variables/adhoc/AdHocVariableEditor.tsx @@ -2,8 +2,8 @@ import React, { PureComponent } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { DataSourceInstanceSettings, getDataSourceRef } from '@grafana/data'; -import { DataSourcePicker } from '@grafana/runtime'; import { Alert, Field } from '@grafana/ui'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { StoreState } from 'app/types'; import { VariableLegend } from '../editor/VariableLegend'; diff --git a/public/app/features/variables/query/QueryVariableEditor.tsx b/public/app/features/variables/query/QueryVariableEditor.tsx index 50bd589a9e5..1077ceb1eb8 100644 --- a/public/app/features/variables/query/QueryVariableEditor.tsx +++ b/public/app/features/variables/query/QueryVariableEditor.tsx @@ -3,8 +3,9 @@ import { connect, ConnectedProps } from 'react-redux'; import { DataSourceInstanceSettings, getDataSourceRef, LoadingState, SelectableValue } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { DataSourcePicker, getTemplateSrv } from '@grafana/runtime'; +import { getTemplateSrv } from '@grafana/runtime'; import { Field } from '@grafana/ui'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { StoreState } from '../../../types'; import { getTimeSrv } from '../../dashboard/services/TimeSrv'; diff --git a/public/app/plugins/datasource/cloudwatch/components/XrayLinkConfig.tsx b/public/app/plugins/datasource/cloudwatch/components/XrayLinkConfig.tsx index 9efd3c75164..107a11e42d3 100644 --- a/public/app/plugins/datasource/cloudwatch/components/XrayLinkConfig.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/XrayLinkConfig.tsx @@ -1,9 +1,9 @@ import { css } from '@emotion/css'; import React from 'react'; -import { GrafanaTheme2 } from '@grafana/data'; -import { DataSourcePicker } from '@grafana/runtime'; +import { GrafanaTheme2, DataSourceInstanceSettings } from '@grafana/data'; import { Alert, InlineField, useStyles2 } from '@grafana/ui'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; const getStyles = (theme: GrafanaTheme2) => ({ @@ -51,7 +51,7 @@ export function XrayLinkConfig({ datasourceUid, onChange }: Props) { > onChange(ds.uid)} + onChange={(ds: DataSourceInstanceSettings) => onChange(ds.uid)} current={datasourceUid} noDefault={true} /> diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx index 74df666879d..dd4292cee11 100644 --- a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx +++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx @@ -2,9 +2,9 @@ import { css } from '@emotion/css'; import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { usePrevious } from 'react-use'; -import { VariableSuggestion } from '@grafana/data'; -import { DataSourcePicker } from '@grafana/runtime'; +import { DataSourceInstanceSettings, VariableSuggestion } from '@grafana/data'; import { Button, LegacyForms, DataLinkInput, stylesFactory } from '@grafana/ui'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { DataLinkConfig } from '../types'; @@ -126,7 +126,7 @@ export const DataLink = (props: Props) => { { + onChange={(ds: DataSourceInstanceSettings) => { onChange({ ...value, datasourceUid: ds.uid, diff --git a/public/app/plugins/datasource/loki/configuration/DerivedField.test.tsx b/public/app/plugins/datasource/loki/configuration/DerivedField.test.tsx index 7b5b58fa119..c708e74bc10 100644 --- a/public/app/plugins/datasource/loki/configuration/DerivedField.test.tsx +++ b/public/app/plugins/datasource/loki/configuration/DerivedField.test.tsx @@ -67,7 +67,7 @@ describe('DerivedField', () => { ); expect(await screen.findByText('Name')).toBeInTheDocument(); - expect(screen.getByLabelText(selectors.components.DataSourcePicker.inputV2)).toBeInTheDocument(); + expect(screen.getByTestId(selectors.components.DataSourcePicker.container)).toBeInTheDocument(); }); it('shows url link if uid is not set', async () => { @@ -89,7 +89,7 @@ describe('DerivedField', () => { ); expect(await screen.findByText('Name')).toBeInTheDocument(); - expect(screen.queryByLabelText(selectors.components.DataSourcePicker.inputV2)).not.toBeInTheDocument(); + expect(await screen.queryByTestId(selectors.components.DataSourcePicker.container)).not.toBeInTheDocument(); }); it('shows only tracing datasources for internal link', async () => { diff --git a/public/app/plugins/datasource/loki/configuration/DerivedField.tsx b/public/app/plugins/datasource/loki/configuration/DerivedField.tsx index 356fa4a3223..b6cff64c3ca 100644 --- a/public/app/plugins/datasource/loki/configuration/DerivedField.tsx +++ b/public/app/plugins/datasource/loki/configuration/DerivedField.tsx @@ -2,9 +2,9 @@ import { css } from '@emotion/css'; import React, { ChangeEvent, useEffect, useState } from 'react'; import { usePrevious } from 'react-use'; -import { GrafanaTheme2, VariableSuggestion } from '@grafana/data'; -import { DataSourcePicker } from '@grafana/runtime'; +import { GrafanaTheme2, DataSourceInstanceSettings, VariableSuggestion } from '@grafana/data'; import { Button, DataLinkInput, Field, Icon, Input, Label, Tooltip, useStyles2, Switch } from '@grafana/ui'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { DerivedFieldConfig } from '../types'; @@ -145,7 +145,7 @@ export const DerivedField = (props: Props) => { + onChange={(ds: DataSourceInstanceSettings) => onChange({ ...value, datasourceUid: ds.uid, diff --git a/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx b/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx index ba13f98e692..f74752c420d 100644 --- a/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx +++ b/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx @@ -1,8 +1,9 @@ import React, { useState } from 'react'; +import { DataSourceInstanceSettings } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { DataSourcePicker } from '@grafana/runtime'; import { Button, InlineField, Input, Switch, useTheme2 } from '@grafana/ui'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { ExemplarTraceIdDestination } from '../types'; @@ -58,7 +59,7 @@ export default function ExemplarSetting({ value, onChange, onDelete, disabled }: current={value.datasourceUid} noDefault={true} width={40} - onChange={(ds) => + onChange={(ds: DataSourceInstanceSettings) => onChange({ ...value, datasourceUid: ds.uid, diff --git a/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx b/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx index 8a5d9d87b53..7ae8e368ee2 100644 --- a/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx +++ b/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx @@ -1,8 +1,12 @@ import React from 'react'; -import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data'; -import { DataSourcePicker } from '@grafana/runtime'; +import { + DataSourceInstanceSettings, + DataSourcePluginOptionsEditorProps, + updateDatasourcePluginJsonDataOption, +} from '@grafana/data'; import { Button, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { TempoJsonData } from '../types'; @@ -33,7 +37,7 @@ export function LokiSearchSettings({ options, onOptionsChange }: Props) { current={options.jsonData.lokiSearch?.datasourceUid} noDefault={true} width={40} - onChange={(ds) => + onChange={(ds: DataSourceInstanceSettings) => updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'lokiSearch', { datasourceUid: ds.uid, }) diff --git a/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx b/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx index 46ecf18670c..646d004f888 100644 --- a/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx +++ b/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx @@ -1,8 +1,12 @@ import React from 'react'; -import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data'; -import { DataSourcePicker } from '@grafana/runtime'; +import { + DataSourceInstanceSettings, + DataSourcePluginOptionsEditorProps, + updateDatasourcePluginJsonDataOption, +} from '@grafana/data'; import { Button, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { TempoJsonData } from '../types'; @@ -27,7 +31,7 @@ export function ServiceGraphSettings({ options, onOptionsChange }: Props) { current={options.jsonData.serviceMap?.datasourceUid} noDefault={true} width={40} - onChange={(ds) => + onChange={(ds: DataSourceInstanceSettings) => updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'serviceMap', { datasourceUid: ds.uid, }) diff --git a/public/app/plugins/panel/alertlist/module.tsx b/public/app/plugins/panel/alertlist/module.tsx index 481d3ec14b0..33f3126f923 100644 --- a/public/app/plugins/panel/alertlist/module.tsx +++ b/public/app/plugins/panel/alertlist/module.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { PanelPlugin } from '@grafana/data'; -import { config, DataSourcePicker } from '@grafana/runtime'; +import { DataSourceInstanceSettings, PanelPlugin } from '@grafana/data'; +import { config } from '@grafana/runtime'; import { TagsInput } from '@grafana/ui'; import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker'; import { @@ -9,6 +9,7 @@ import { GENERAL_FOLDER, ReadonlyFolderPicker, } from 'app/core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker'; +import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { PermissionLevelString } from 'app/types'; import { GRAFANA_DATASOURCE_NAME } from '../../../features/alerting/unified/utils/datasource'; @@ -259,7 +260,7 @@ const unifiedAlertList = new PanelPlugin(UnifiedAlertLi type={['prometheus', 'loki', 'grafana']} noDefault current={props.value} - onChange={(ds) => props.onChange(ds.name)} + onChange={(ds: DataSourceInstanceSettings) => props.onChange(ds.name)} onClear={() => props.onChange(null)} /> );