AdHocVariable: Adds default data source (#32470)

public/app/features/variables/adhoc/AdHocVariableEditor.tsx

@@ -1,30 +1,31 @@
 import React, { PureComponent } from 'react';
-import { MapDispatchToProps, MapStateToProps } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
+import { Alert, InlineFieldRow, VerticalGroup } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 
 import { AdHocVariableModel } from '../types';
 import { VariableEditorProps } from '../editor/types';
 import { VariableEditorState } from '../editor/reducer';
 import { AdHocVariableEditorState } from './reducer';
 import { changeVariableDatasource, initAdHocVariableEditor } from './actions';
-import { connectWithStore } from 'app/core/utils/connectWithReduxStore';
 import { StoreState } from 'app/types';
-import { Alert, InlineFieldRow, VerticalGroup } from '@grafana/ui';
 import { VariableSectionHeader } from '../editor/VariableSectionHeader';
 import { VariableSelectField } from '../editor/VariableSelectField';
-import { SelectableValue } from '@grafana/data';
+
+const mapStateToProps = (state: StoreState) => ({
+  editor: state.templating.editor as VariableEditorState<AdHocVariableEditorState>,
+});
+
+const mapDispatchToProps = {
+  initAdHocVariableEditor,
+  changeVariableDatasource,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
 
 export interface OwnProps extends VariableEditorProps<AdHocVariableModel> {}
 
-interface ConnectedProps {
-  editor: VariableEditorState<AdHocVariableEditorState>;
-}
-
-interface DispatchProps {
-  initAdHocVariableEditor: typeof initAdHocVariableEditor;
-  changeVariableDatasource: typeof changeVariableDatasource;
-}
-
-type Props = OwnProps & ConnectedProps & DispatchProps;
+type Props = OwnProps & ConnectedProps<typeof connector>;
 
 export class AdHocVariableEditorUnConnected extends PureComponent<Props> {
   componentDidMount() {
@@ -32,14 +33,14 @@ export class AdHocVariableEditorUnConnected extends PureComponent<Props> {
   }
 
   onDatasourceChanged = (option: SelectableValue<string>) => {
-    this.props.changeVariableDatasource(option.value ?? '');
+    this.props.changeVariableDatasource(option.value);
   };
 
   render() {
     const { variable, editor } = this.props;
     const dataSources = editor.extended?.dataSources ?? [];
     const infoText = editor.extended?.infoText ?? null;
-    const options = dataSources.map((ds) => ({ label: ds.text, value: ds.value ?? '' }));
+    const options = dataSources.map((ds) => ({ label: ds.text, value: ds.value }));
     const value = options.find((o) => o.value === variable.datasource) ?? options[0];
 
     return (
@@ -62,17 +63,4 @@ export class AdHocVariableEditorUnConnected extends PureComponent<Props> {
   }
 }
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, ownProps) => ({
-  editor: state.templating.editor as VariableEditorState<AdHocVariableEditorState>,
-});
-
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
-  initAdHocVariableEditor,
-  changeVariableDatasource,
-};
-
-export const AdHocVariableEditor = connectWithStore(
-  AdHocVariableEditorUnConnected,
-  mapStateToProps,
-  mapDispatchToProps
-);
+export const AdHocVariableEditor = connector(AdHocVariableEditorUnConnected);

public/app/features/variables/adhoc/actions.test.ts

@@ -351,6 +351,7 @@ describe('adhoc actions', () => {
   describe('when initAdHocVariableEditor is dispatched', () => {
     it('then correct actions are dispatched', async () => {
       const datasources = [
+        { ...createDatasource('default', true), value: null },
         createDatasource('elasticsearch-v1'),
         createDatasource('loki', false),
         createDatasource('influx'),
@@ -367,6 +368,7 @@ describe('adhoc actions', () => {
 
       const expectedDatasources = [
         { text: '', value: '' },
+        { text: 'default (default)', value: null },
         { text: 'elasticsearch-v1', value: 'elasticsearch-v1' },
         { text: 'influx', value: 'influx' },
         { text: 'elasticsearch-v7', value: 'elasticsearch-v7' },

public/app/features/variables/adhoc/actions.ts

@@ -80,7 +80,7 @@ export const setFiltersFromUrl = (id: string, filters: AdHocVariableFilter[]): T
   };
 };
 
-export const changeVariableDatasource = (datasource: string): ThunkResult<void> => {
+export const changeVariableDatasource = (datasource?: string): ThunkResult<void> => {
   return async (dispatch, getState) => {
     const { editor } = getState().templating;
     const variable = getVariable(editor.id, getState());
@@ -111,15 +111,13 @@ export const changeVariableDatasource = (datasource: string): ThunkResult<void>
 export const initAdHocVariableEditor = (): ThunkResult<void> => (dispatch) => {
   const dataSources = getDatasourceSrv().getMetricSources();
   const selectable = dataSources.reduce(
-    (all: Array<{ text: string; value: string }>, ds) => {
-      if (ds.meta.mixed || ds.value === null) {
+    (all: Array<{ text: string; value: string | null }>, ds) => {
+      if (ds.meta.mixed) {
         return all;
       }
 
-      all.push({
-        text: ds.name,
-        value: ds.value,
-      });
+      const text = ds.value === null ? `${ds.name} (default)` : ds.name;
+      all.push({ text: text, value: ds.value });
 
       return all;
     },