From ec33bae8d4172b6ac3cc5e5a1c79db70e7486153 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 26 May 2021 08:59:49 +0200
Subject: [PATCH] PanelEdit: Add data source label to data source picker
 dropdown (#34605)

* PanelEdit: Add data source label to data source picker dropdown

* Updated based on ux feedback
---
 .../src/components/DataSourcePicker.tsx          | 16 ++++++++++++++--
 .../app/features/query/components/QueryGroup.tsx |  2 ++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-runtime/src/components/DataSourcePicker.tsx b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
index 1146c35fe02..b0af3414b0d 100644
--- a/packages/grafana-runtime/src/components/DataSourcePicker.tsx
+++ b/packages/grafana-runtime/src/components/DataSourcePicker.tsx
@@ -2,10 +2,11 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { HorizontalGroup, PluginSignatureBadge, Select } from '@grafana/ui';
+import { HorizontalGroup, PluginSignatureBadge, Select, stylesFactory } from '@grafana/ui';
 import { DataSourceInstanceSettings, isUnsignedPluginSignature, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { getDataSourceSrv } from '../services/dataSourceSrv';
+import { css, cx } from '@emotion/css';
 
 /**
  * Component props description for the {@link DataSourcePicker}
@@ -138,11 +139,12 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
     const { error } = this.state;
     const options = this.getDataSourceOptions();
     const value = this.getCurrentValue();
+    const styles = getStyles();
 
     return (
       <div aria-label={selectors.components.DataSourcePicker.container}>
         <Select
-          className="ds-picker select-container"
+          className={styles.select}
           isMulti={false}
           isClearable={false}
           backspaceRemovesValue={false}
@@ -172,3 +174,13 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
     );
   }
 }
+
+const getStyles = stylesFactory(() => ({
+  select: cx(
+    css({
+      minWidth: 200,
+    }),
+    'ds-picker',
+    'select-container'
+  ),
+}));
diff --git a/public/app/features/query/components/QueryGroup.tsx b/public/app/features/query/components/QueryGroup.tsx
index c919376e229..034bc83cd9e 100644
--- a/public/app/features/query/components/QueryGroup.tsx
+++ b/public/app/features/query/components/QueryGroup.tsx
@@ -6,6 +6,7 @@ import {
   CustomScrollbar,
   HorizontalGroup,
   Icon,
+  InlineFormLabel,
   Modal,
   ScrollbarPosition,
   stylesFactory,
@@ -201,6 +202,7 @@ export class QueryGroup extends PureComponent<Props, State> {
     return (
       <div>
         <div className={styles.dataSourceRow}>
+          <InlineFormLabel width={'auto'}>Data source</InlineFormLabel>
           <div className={styles.dataSourceRowItem}>
             <DataSourcePicker
               onChange={this.onChangeDataSource}