Variables: Adds back default option for data source variable (#31208)

* Variables: Adds back default option for data source variable

* Chore: updates after PR comments

packages/grafana-data/src/types/datasource.ts

@@ -594,6 +594,9 @@ export interface DataSourceInstanceSettings<T extends DataSourceJsonData = DataS
   withCredentials?: boolean;
 }
 
+/**
+ * @deprecated -- use {@link DataSourceInstanceSettings} instead
+ */
 export interface DataSourceSelectItem {
   name: string;
   value: string | null;

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

+import { DataSourceInstanceSettings } from '@grafana/data';
+
 import { reduxTester } from '../../../../test/core/redux/reduxTester';
 import { TemplatingState } from '../state/reducers';
 import { getRootReducer } from '../state/helpers';
@@ -9,12 +11,12 @@ import {
   initDataSourceVariableEditor,
   updateDataSourceVariableOptions,
 } from './actions';
-import { DataSourceInstanceSettings, DataSourceJsonData, DataSourcePluginMeta } from '@grafana/data';
 import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
 import { createDataSourceOptions } from './reducer';
 import { addVariable, setCurrentVariableValue } from '../state/sharedReducer';
 import { changeVariableEditorExtended } from '../editor/reducer';
 import { datasourceBuilder } from '../shared/testing/builders';
+import { getDataSourceInstanceSetting } from '../shared/testing/helpers';
 
 interface Args {
   sources?: DataSourceInstanceSettings[];
@@ -62,10 +64,7 @@ describe('data source actions', () => {
             toVariablePayload(
               { type: 'datasource', id: '0' },
               {
-                sources: [
-                  { name: 'first-name', value: 'first-name', meta },
-                  { name: 'second-name', value: 'second-name', meta },
-                ],
+                sources,
                 regex: (undefined as unknown) as RegExp,
               }
             )
@@ -113,10 +112,7 @@ describe('data source actions', () => {
             toVariablePayload(
               { type: 'datasource', id: '0' },
               {
-                sources: [
-                  { name: 'first-name', value: 'first-name', meta },
-                  { name: 'second-name', value: 'second-name', meta },
-                ],
+                sources,
                 regex: /.*(second-name).*/,
               }
             )
@@ -165,14 +161,3 @@ describe('data source actions', () => {
     });
   });
 });
-
-function getDataSourceInstanceSetting(name: string, meta: DataSourcePluginMeta): DataSourceInstanceSettings {
-  return {
-    id: 1,
-    uid: '',
-    type: '',
-    name,
-    meta,
-    jsonData: ({} as unknown) as DataSourceJsonData,
-  };
-}

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

+import _ from 'lodash';
+import { getTemplateSrv } from '@grafana/runtime';
+import { stringToJsRegex } from '@grafana/data';
+
 import { toVariablePayload, VariableIdentifier } from '../state/types';
 import { ThunkResult } from '../../../types';
 import { createDataSourceOptions } from './reducer';
 import { validateVariableSelectionState } from '../state/actions';
-import { DataSourceInstanceSettings, stringToJsRegex } from '@grafana/data';
 import { getDatasourceSrv } from '../../plugins/datasource_srv';
 import { getVariable } from '../state/selectors';
 import { DataSourceVariableModel } from '../types';
-import { getTemplateSrv } from '@grafana/runtime';
-import _ from 'lodash';
 import { changeVariableEditorExtended } from '../editor/reducer';
 
 export interface DataSourceVariableActionDependencies {
@@ -18,10 +19,7 @@ export const updateDataSourceVariableOptions = (
   identifier: VariableIdentifier,
   dependencies: DataSourceVariableActionDependencies = { getDatasourceSrv: getDatasourceSrv }
 ): ThunkResult<void> => async (dispatch, getState) => {
-  const sources = dependencies
-    .getDatasourceSrv()
-    .getList({ metrics: true, variables: false })
-    .map(toDataSourceSelectItem);
+  const sources = dependencies.getDatasourceSrv().getList({ metrics: true, variables: false });
   const variableInState = getVariable<DataSourceVariableModel>(identifier.id, getState());
   let regex;
 
@@ -37,10 +35,7 @@ export const updateDataSourceVariableOptions = (
 export const initDataSourceVariableEditor = (
   dependencies: DataSourceVariableActionDependencies = { getDatasourceSrv: getDatasourceSrv }
 ): ThunkResult<void> => (dispatch) => {
-  const dataSources = dependencies
-    .getDatasourceSrv()
-    .getList({ metrics: true, variables: true })
-    .map(toDataSourceSelectItem);
+  const dataSources = dependencies.getDatasourceSrv().getList({ metrics: true, variables: true });
   const dataSourceTypes = _(dataSources)
     .uniqBy('meta.id')
     .map((ds: any) => {
@@ -57,11 +52,3 @@ export const initDataSourceVariableEditor = (
     })
   );
 };
-
-function toDataSourceSelectItem(setting: DataSourceInstanceSettings) {
-  return {
-    name: setting.name,
-    value: setting.name,
-    meta: setting.meta,
-  };
-}

public/app/features/variables/datasource/reducer.test.ts

+import { DataSourceInstanceSettings } from '@grafana/data';
+
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import { VariablesState } from '../state/variablesReducer';
 import { createDataSourceOptions, dataSourceVariableReducer } from './reducer';
@@ -5,20 +7,15 @@ import { DataSourceVariableModel } from '../types';
 import { getVariableTestContext } from '../state/helpers';
 import cloneDeep from 'lodash/cloneDeep';
 import { createDataSourceVariableAdapter } from './adapter';
-import { DataSourceSelectItem } from '@grafana/data';
 import { toVariablePayload } from '../state/types';
 import { getMockPlugins } from '../../plugins/__mocks__/pluginMocks';
+import { getDataSourceInstanceSetting } from '../shared/testing/helpers';
 
 describe('dataSourceVariableReducer', () => {
   const adapter = createDataSourceVariableAdapter();
   describe('when createDataSourceOptions is dispatched', () => {
     const plugins = getMockPlugins(3);
-    const sources: DataSourceSelectItem[] = plugins.map((p) => ({
-      name: p.name,
-      value: `${p.name} value`,
-      meta: p,
-      sort: '',
-    }));
+    const sources: DataSourceInstanceSettings[] = plugins.map((p) => getDataSourceInstanceSetting(p.name, p));
 
     it.each`
       query                 | regex                           | includeAll | expected
@@ -49,4 +46,32 @@ describe('dataSourceVariableReducer', () => {
       }
     );
   });
+
+  describe('when createDataSourceOptions is dispatched and item is default data source', () => {
+    it('then the state should include an extra default option', () => {
+      const plugins = getMockPlugins(3);
+      const sources: DataSourceInstanceSettings[] = plugins.map((p) => getDataSourceInstanceSetting(p.name, p));
+      sources[1].isDefault = true;
+
+      const { initialState } = getVariableTestContext<DataSourceVariableModel>(adapter, {
+        query: sources[1].meta.id,
+        includeAll: false,
+      });
+      const payload = toVariablePayload({ id: '0', type: 'datasource' }, { sources, regex: undefined });
+
+      reducerTester<VariablesState>()
+        .givenReducer(dataSourceVariableReducer, cloneDeep(initialState))
+        .whenActionIsDispatched(createDataSourceOptions(payload))
+        .thenStateShouldEqual({
+          ...initialState,
+          ['0']: ({
+            ...initialState['0'],
+            options: [
+              { text: 'pretty cool plugin-1', value: 'pretty cool plugin-1', selected: false },
+              { text: 'default', value: 'default', selected: false },
+            ],
+          } as unknown) as DataSourceVariableModel,
+        });
+    });
+  });
 });

public/app/features/variables/datasource/reducer.ts

 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { DataSourceInstanceSettings } from '@grafana/data';
+
 import { DataSourceVariableModel, initialVariableModelState, VariableOption, VariableRefresh } from '../types';
 import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, getInstanceState, VariablePayload } from '../state/types';
 import { initialVariablesState, VariablesState } from '../state/variablesReducer';
-import { DataSourceSelectItem } from '@grafana/data';
 
 export interface DataSourceVariableEditorState {
   dataSourceTypes: Array<{ text: string; value: string }>;
@@ -26,7 +27,7 @@ export const dataSourceVariableSlice = createSlice({
   reducers: {
     createDataSourceOptions: (
       state: VariablesState,
-      action: PayloadAction<VariablePayload<{ sources: DataSourceSelectItem[]; regex: RegExp | undefined }>>
+      action: PayloadAction<VariablePayload<{ sources: DataSourceInstanceSettings[]; regex: RegExp | undefined }>>
     ) => {
       const { sources, regex } = action.payload.data;
       const options: VariableOption[] = [];
@@ -43,6 +44,10 @@ export const dataSourceVariableSlice = createSlice({
         }
 
         options.push({ text: source.name, value: source.name, selected: false });
+
+        if (source.isDefault) {
+          options.push({ text: 'default', value: 'default', selected: false });
+        }
       }
 
       if (options.length === 0) {

public/app/features/variables/shared/testing/helpers.ts

+import { DataSourceInstanceSettings, DataSourceJsonData, DataSourcePluginMeta } from '@grafana/data';
+
+export function getDataSourceInstanceSetting(name: string, meta: DataSourcePluginMeta): DataSourceInstanceSettings {
+  return {
+    id: 1,
+    uid: '',
+    type: '',
+    name,
+    meta,
+    jsonData: ({} as unknown) as DataSourceJsonData,
+  };
+}