From 104292df636fc44399a811094b92793f96ba8190 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 14 Dec 2018 11:23:05 +0100
Subject: [PATCH 01/10] wip: unifying select components

---
 public/app/core/components/Picker/Select.tsx  | 142 ++++++++++--------
 .../SharedPreferences/SharedPreferences.tsx   |  26 ++--
 .../app/plugins/panel/gauge/ValueOptions.tsx  |  30 ++--
 3 files changed, 107 insertions(+), 91 deletions(-)

diff --git a/public/app/core/components/Picker/Select.tsx b/public/app/core/components/Picker/Select.tsx
index b8704893cdb..40ee1af2148 100644
--- a/public/app/core/components/Picker/Select.tsx
+++ b/public/app/core/components/Picker/Select.tsx
@@ -1,60 +1,82 @@
-// import React, { PureComponent } from 'react';
-// import Select as ReactSelect from 'react-select';
-// import DescriptionOption from './DescriptionOption';
-// import IndicatorsContainer from './IndicatorsContainer';
-// import ResetStyles from './ResetStyles';
-//
-// export interface OptionType {
-//   label: string;
-//   value: string;
-// }
-//
-// interface Props {
-//   defaultValue?: any;
-//   getOptionLabel: (item: T) => string;
-//   getOptionValue: (item: T) => string;
-//   onChange: (item: T) => {} | void;
-//   options: T[];
-//   placeholder?: string;
-//   width?: number;
-//   value: T;
-//   className?: string;
-// }
-//
-// export class Select<T> extends PureComponent<Props<T>> {
-//   static defaultProps = {
-//     width: null,
-//     className: '',
-//   }
-//
-//   render() {
-//     const { defaultValue, getOptionLabel, getOptionValue, onSelected, options, placeholder, width, value, className } = this.props;
-//     let widthClass = '';
-//     if (width) {
-//       widthClass = 'width-'+width;
-//     }
-//
-//   return (
-//     <ReactSelect
-//       classNamePrefix="gf-form-select-box"
-//       className={`gf-form-input gf-form-input--form-dropdown ${widthClass} ${className}`}
-//       components={{
-//         Option: DescriptionOption,
-//         IndicatorsContainer,
-//       }}
-//       defaultValue={defaultValue}
-//       value={value}
-//       getOptionLabel={getOptionLabel}
-//       getOptionValue={getOptionValue}
-//       menuShouldScrollIntoView={false}
-//       isSearchable={false}
-//       onChange={onSelected}
-//       options={options}
-//       placeholder={placeholder || 'Choose'}
-//       styles={ResetStyles}
-//     />
-//   );
-// }
-// }
-//
-// export default Select;
+// Libraries
+import classNames from 'classnames';
+import React, { PureComponent } from 'react';
+import { default as ReactSelect } from 'react-select';
+
+// Components
+import DescriptionOption from './DescriptionOption';
+import IndicatorsContainer from './IndicatorsContainer';
+import ResetStyles from './ResetStyles';
+
+export interface SelectOptionItem {
+  label?: string;
+  value?: string;
+  imgUrl?: string;
+  description?: string;
+  [key: string]: any;
+}
+
+interface Props {
+  defaultValue?: any;
+  getOptionLabel?: (item: SelectOptionItem) => string;
+  getOptionValue?: (item: SelectOptionItem) => string;
+  onChange: (item: SelectOptionItem) => {} | void;
+  options: SelectOptionItem[];
+  placeholder?: string;
+  width?: number;
+  value: SelectOptionItem;
+  className?: string;
+  components: object;
+}
+
+export class Select extends PureComponent<Props> {
+  static defaultProps = {
+    width: null,
+    className: '',
+    components: {},
+  };
+
+  render() {
+    const {
+      defaultValue,
+      getOptionLabel,
+      getOptionValue,
+      onChange,
+      options,
+      placeholder,
+      width,
+      value,
+      className,
+    } = this.props;
+
+    let widthClass = '';
+    if (width) {
+      widthClass = 'width-' + width;
+    }
+
+    const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);
+
+    return (
+      <ReactSelect
+        classNamePrefix="gf-form-select-box"
+        className={selectClassNames}
+        components={{
+          Option: DescriptionOption,
+          IndicatorsContainer,
+        }}
+        defaultValue={defaultValue}
+        value={value}
+        getOptionLabel={getOptionLabel}
+        getOptionValue={getOptionValue}
+        menuShouldScrollIntoView={false}
+        isSearchable={false}
+        onChange={onChange}
+        options={options}
+        placeholder={placeholder || 'Choose'}
+        styles={ResetStyles}
+      />
+    );
+  }
+}
+
+export default Select;
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index 098cbe16ab8..1ab3f048a9b 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { Label } from 'app/core/components/Label/Label';
-import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import Select from 'app/core/components/Picker/Select';
 import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
 
 import { DashboardSearchHit } from 'app/types';
@@ -17,12 +17,12 @@ export interface State {
   dashboards: DashboardSearchHit[];
 }
 
-const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
+const themes = [{ value: '', label: 'Default' }, { value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }];
 
 const timezones = [
-  { value: '', text: 'Default' },
-  { value: 'browser', text: 'Local browser time' },
-  { value: 'utc', text: 'UTC' },
+  { value: '', label: 'Default' },
+  { value: 'browser', label: 'Local browser time' },
+  { value: 'utc', label: 'UTC' },
 ];
 
 export class SharedPreferences extends PureComponent<Props, State> {
@@ -91,12 +91,10 @@ export class SharedPreferences extends PureComponent<Props, State> {
         <h3 className="page-heading">Preferences</h3>
         <div className="gf-form">
           <span className="gf-form-label width-11">UI Theme</span>
-          <SimplePicker
+          <Select
             value={themes.find(item => item.value === theme)}
             options={themes}
-            getOptionValue={i => i.value}
-            getOptionLabel={i => i.text}
-            onSelected={theme => this.onThemeChanged(theme.value)}
+            onChange={theme => this.onThemeChanged(theme.value)}
             width={20}
           />
         </div>
@@ -107,11 +105,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
           >
             Home Dashboard
           </Label>
-          <SimplePicker
+          <Select
             value={dashboards.find(dashboard => dashboard.id === homeDashboardId)}
             getOptionValue={i => i.id}
             getOptionLabel={i => i.title}
-            onSelected={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
+            onChange={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
             options={dashboards}
             placeholder="Chose default dashboard"
             width={20}
@@ -119,11 +117,9 @@ export class SharedPreferences extends PureComponent<Props, State> {
         </div>
         <div className="gf-form">
           <label className="gf-form-label width-11">Timezone</label>
-          <SimplePicker
+          <Select
             value={timezones.find(item => item.value === timezone)}
-            getOptionValue={i => i.value}
-            getOptionLabel={i => i.text}
-            onSelected={timezone => this.onTimeZoneChanged(timezone.value)}
+            onChange={timezone => this.onTimeZoneChanged(timezone.value)}
             options={timezones}
             width={20}
           />
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index e3052f10861..7cb1c90d347 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -1,21 +1,21 @@
 import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
-import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import Select from 'app/core/components/Picker/Select';
 import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
 import { OptionModuleProps } from './module';
 
 const statOptions = [
-  { value: 'min', text: 'Min' },
-  { value: 'max', text: 'Max' },
-  { value: 'avg', text: 'Average' },
-  { value: 'current', text: 'Current' },
-  { value: 'total', text: 'Total' },
-  { value: 'name', text: 'Name' },
-  { value: 'first', text: 'First' },
-  { value: 'delta', text: 'Delta' },
-  { value: 'diff', text: 'Difference' },
-  { value: 'range', text: 'Range' },
-  { value: 'last_time', text: 'Time of last point' },
+  { value: 'min', label: 'Min' },
+  { value: 'max', label: 'Max' },
+  { value: 'avg', label: 'Average' },
+  { value: 'current', label: 'Current' },
+  { value: 'total', label: 'Total' },
+  { value: 'name', label: 'Name' },
+  { value: 'first', label: 'First' },
+  { value: 'delta', label: 'Delta' },
+  { value: 'diff', label: 'Difference' },
+  { value: 'range', label: 'Range' },
+  { value: 'last_time', label: 'Time of last point' },
 ];
 
 const labelWidth = 6;
@@ -43,12 +43,10 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> {
         <h5 className="page-heading">Value</h5>
         <div className="gf-form-inline">
           <Label width={labelWidth}>Stat</Label>
-          <SimplePicker
+          <Select
             width={12}
             options={statOptions}
-            getOptionLabel={i => i.text}
-            getOptionValue={i => i.value}
-            onSelected={this.onStatChange}
+            onChange={this.onStatChange}
             value={statOptions.find(option => option.value === stat)}
           />
         </div>

From 58cc2e34d68cdf9691e840876a93bb722373c53c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 14 Dec 2018 12:38:36 +0100
Subject: [PATCH 02/10] User picker using common select componnet

---
 .../components/Picker/NoOptionsMessage.tsx    | 12 +--
 public/app/core/components/Picker/Select.tsx  | 87 +++++++++++++++++--
 .../app/core/components/Picker/UserPicker.tsx | 27 +++---
 public/app/features/panel/panel_header.ts     |  4 +-
 4 files changed, 100 insertions(+), 30 deletions(-)

diff --git a/public/app/core/components/Picker/NoOptionsMessage.tsx b/public/app/core/components/Picker/NoOptionsMessage.tsx
index 1d2ad4a179e..3626684df22 100644
--- a/public/app/core/components/Picker/NoOptionsMessage.tsx
+++ b/public/app/core/components/Picker/NoOptionsMessage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { components } from 'react-select';
 import { OptionProps } from 'react-select/lib/components/Option';
 
@@ -6,13 +6,15 @@ export interface Props {
   children: Element;
 }
 
-export const PickerOption = (props: OptionProps<any>) => {
-  const { children, className } = props;
+export const NoOptionsMessage = (props: OptionProps<any>) => {
+  const { children } = props;
   return (
     <components.Option {...props}>
-      <div className={`description-picker-option__button btn btn-link ${className}`}>{children}</div>
+      <div className="gf-form-select-box__desc-option">
+        <div className="gf-form-select-box__desc-option__body">{children}</div>
+      </div>
     </components.Option>
   );
 };
 
-export default PickerOption;
+export default NoOptionsMessage;
diff --git a/public/app/core/components/Picker/Select.tsx b/public/app/core/components/Picker/Select.tsx
index 40ee1af2148..5b7cad5b921 100644
--- a/public/app/core/components/Picker/Select.tsx
+++ b/public/app/core/components/Picker/Select.tsx
@@ -2,10 +2,12 @@
 import classNames from 'classnames';
 import React, { PureComponent } from 'react';
 import { default as ReactSelect } from 'react-select';
+import { default as ReactAsyncSelect } from 'react-select/lib/Async';
 
 // Components
-import DescriptionOption from './DescriptionOption';
+import { Option, SingleValue } from './PickerOption';
 import IndicatorsContainer from './IndicatorsContainer';
+import NoOptionsMessage from './NoOptionsMessage';
 import ResetStyles from './ResetStyles';
 
 export interface SelectOptionItem {
@@ -16,20 +18,31 @@ export interface SelectOptionItem {
   [key: string]: any;
 }
 
-interface Props {
+interface CommonProps {
   defaultValue?: any;
   getOptionLabel?: (item: SelectOptionItem) => string;
   getOptionValue?: (item: SelectOptionItem) => string;
   onChange: (item: SelectOptionItem) => {} | void;
-  options: SelectOptionItem[];
   placeholder?: string;
   width?: number;
-  value: SelectOptionItem;
+  value?: SelectOptionItem;
   className?: string;
   components: object;
 }
 
-export class Select extends PureComponent<Props> {
+interface SelectProps {
+  options: SelectOptionItem[];
+}
+
+interface AsyncProps {
+  defaultOptions: boolean;
+  loadOptions: (query: string) => Promise<SelectOptionItem[]>;
+  isLoading: boolean;
+  loadingMessage?: () => string;
+  noOptionsMessage?: () => string;
+}
+
+export class Select extends PureComponent<CommonProps & SelectProps> {
   static defaultProps = {
     width: null,
     className: '',
@@ -61,7 +74,8 @@ export class Select extends PureComponent<Props> {
         classNamePrefix="gf-form-select-box"
         className={selectClassNames}
         components={{
-          Option: DescriptionOption,
+          Option,
+          SingleValue,
           IndicatorsContainer,
         }}
         defaultValue={defaultValue}
@@ -79,4 +93,65 @@ export class Select extends PureComponent<Props> {
   }
 }
 
+export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
+  static defaultProps = {
+    width: null,
+    className: '',
+    components: {},
+    loadingMessage: () => 'Loading...',
+  };
+
+  render() {
+    const {
+      defaultValue,
+      getOptionLabel,
+      getOptionValue,
+      onChange,
+      placeholder,
+      width,
+      value,
+      className,
+      loadOptions,
+      defaultOptions,
+      isLoading,
+      loadingMessage,
+      noOptionsMessage,
+    } = this.props;
+
+    let widthClass = '';
+    if (width) {
+      widthClass = 'width-' + width;
+    }
+
+    const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);
+
+    return (
+      <ReactAsyncSelect
+        classNamePrefix="gf-form-select-box"
+        className={selectClassNames}
+        components={{
+          Option,
+          SingleValue,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        defaultValue={defaultValue}
+        value={value}
+        getOptionLabel={getOptionLabel}
+        getOptionValue={getOptionValue}
+        menuShouldScrollIntoView={false}
+        isSearchable={false}
+        onChange={onChange}
+        loadOptions={loadOptions}
+        isLoading={isLoading}
+        defaultOptions={defaultOptions}
+        placeholder={placeholder || 'Choose'}
+        styles={ResetStyles}
+        loadingMessage={loadingMessage}
+        noOptionsMessage={noOptionsMessage}
+      />
+    );
+  }
+}
+
 export default Select;
diff --git a/public/app/core/components/Picker/UserPicker.tsx b/public/app/core/components/Picker/UserPicker.tsx
index 01dbb1fd3ea..97bdc230173 100644
--- a/public/app/core/components/Picker/UserPicker.tsx
+++ b/public/app/core/components/Picker/UserPicker.tsx
@@ -1,12 +1,15 @@
+// Libraries
 import React, { Component } from 'react';
-import AsyncSelect from 'react-select/lib/Async';
-import PickerOption from './PickerOption';
+
+// Components
+import { AsyncSelect } from 'app/core/components/Picker/Select';
+
+// Utils & Services
 import { debounce } from 'lodash';
 import { getBackendSrv } from 'app/core/services/backend_srv';
+
+// Types
 import { User } from 'app/types';
-import ResetStyles from './ResetStyles';
-import IndicatorsContainer from './IndicatorsContainer';
-import NoOptionsMessage from './NoOptionsMessage';
 
 export interface Props {
   onSelected: (user: User) => void;
@@ -40,6 +43,7 @@ export class UserPicker extends Component<Props, State> {
       .then(result => {
         return result.map(user => ({
           id: user.userId,
+          value: user.userId,
           label: user.login === user.email ? user.login : `${user.login} - ${user.email}`,
           imgUrl: user.avatarUrl,
           login: user.login,
@@ -57,24 +61,13 @@ export class UserPicker extends Component<Props, State> {
     return (
       <div className="user-picker">
         <AsyncSelect
-          classNamePrefix={`gf-form-select-box`}
-          isMulti={false}
+          className={className}
           isLoading={isLoading}
           defaultOptions={true}
           loadOptions={this.debouncedSearch}
           onChange={onSelected}
-          className={`gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-          styles={ResetStyles}
-          components={{
-            Option: PickerOption,
-            IndicatorsContainer,
-            NoOptionsMessage,
-          }}
           placeholder="Select user"
-          loadingMessage={() => 'Loading...'}
           noOptionsMessage={() => 'No users found'}
-          getOptionValue={i => i.id}
-          getOptionLabel={i => i.label}
         />
       </div>
     );
diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts
index 1d29d04ad98..6a0f81a4c33 100644
--- a/public/app/features/panel/panel_header.ts
+++ b/public/app/features/panel/panel_header.ts
@@ -111,11 +111,11 @@ function panelHeader($compile) {
        */
       function togglePanelStackPosition() {
         const menuOpenClass = 'dropdown-menu-open';
-        const panelGridClass = '.react-grid-item.panel';
+        const panelGridClass = '.react-grid-item';
 
         let panelElem = elem
           .find('[data-toggle=dropdown]')
-          .parentsUntil('.panel')
+          .parentsUntil(panelGridClass)
           .parent();
         const menuElem = elem.find('[data-toggle=dropdown]').parent();
         panelElem = panelElem && panelElem.length ? panelElem[0] : undefined;

From 24825dc8994a81df9ab89659b41f9d2873a12676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 14 Dec 2018 12:59:45 +0100
Subject: [PATCH 03/10] renamed folder to select

---
 .../PermissionList/AddPermission.tsx          | 17 +++---
 .../DisabledPermissionListItem.tsx            | 12 ++---
 .../PermissionList/PermissionListItem.tsx     | 12 ++---
 .../components/Picker/DescriptionOption.tsx   | 26 ----------
 .../components/Picker/DescriptionPicker.tsx   | 52 -------------------
 .../core/components/Picker/SimplePicker.tsx   | 52 -------------------
 .../IndicatorsContainer.tsx                   |  0
 .../{Picker => Select}/NoOptionsMessage.tsx   |  0
 .../{Picker => Select}/PickerOption.test.tsx  |  0
 .../{Picker => Select}/PickerOption.tsx       |  0
 .../{Picker => Select}/ResetStyles.tsx        |  0
 .../components/{Picker => Select}/Select.tsx  | 20 +++++--
 .../{Picker => Select}/TeamPicker.test.tsx    |  0
 .../{Picker => Select}/TeamPicker.tsx         |  0
 .../{Picker => Select}/Unit/UnitGroup.tsx     |  0
 .../{Picker => Select}/Unit/UnitOption.tsx    |  0
 .../{Picker => Select}/Unit/UnitPicker.tsx    |  0
 .../{Picker => Select}/UserPicker.test.tsx    |  0
 .../{Picker => Select}/UserPicker.tsx         |  2 +-
 .../__snapshots__/PickerOption.test.tsx.snap  |  0
 .../__snapshots__/TeamPicker.test.tsx.snap    |  0
 .../__snapshots__/UserPicker.test.tsx.snap    |  0
 .../SharedPreferences/SharedPreferences.tsx   |  4 +-
 .../core/components/TagFilter/TagFilter.tsx   |  6 +--
 .../dashboard/dashgrid/DataSourcePicker.tsx   |  6 +--
 public/app/features/explore/Explore.tsx       |  8 +--
 public/app/features/teams/TeamMembers.tsx     |  2 +-
 public/app/plugins/panel/gauge/MappingRow.tsx |  9 ++--
 .../app/plugins/panel/gauge/ValueOptions.tsx  |  4 +-
 29 files changed, 57 insertions(+), 175 deletions(-)
 delete mode 100644 public/app/core/components/Picker/DescriptionOption.tsx
 delete mode 100644 public/app/core/components/Picker/DescriptionPicker.tsx
 delete mode 100644 public/app/core/components/Picker/SimplePicker.tsx
 rename public/app/core/components/{Picker => Select}/IndicatorsContainer.tsx (100%)
 rename public/app/core/components/{Picker => Select}/NoOptionsMessage.tsx (100%)
 rename public/app/core/components/{Picker => Select}/PickerOption.test.tsx (100%)
 rename public/app/core/components/{Picker => Select}/PickerOption.tsx (100%)
 rename public/app/core/components/{Picker => Select}/ResetStyles.tsx (100%)
 rename public/app/core/components/{Picker => Select}/Select.tsx (90%)
 rename public/app/core/components/{Picker => Select}/TeamPicker.test.tsx (100%)
 rename public/app/core/components/{Picker => Select}/TeamPicker.tsx (100%)
 rename public/app/core/components/{Picker => Select}/Unit/UnitGroup.tsx (100%)
 rename public/app/core/components/{Picker => Select}/Unit/UnitOption.tsx (100%)
 rename public/app/core/components/{Picker => Select}/Unit/UnitPicker.tsx (100%)
 rename public/app/core/components/{Picker => Select}/UserPicker.test.tsx (100%)
 rename public/app/core/components/{Picker => Select}/UserPicker.tsx (96%)
 rename public/app/core/components/{Picker => Select}/__snapshots__/PickerOption.test.tsx.snap (100%)
 rename public/app/core/components/{Picker => Select}/__snapshots__/TeamPicker.test.tsx.snap (100%)
 rename public/app/core/components/{Picker => Select}/__snapshots__/UserPicker.test.tsx.snap (100%)

diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx
index d6da7c68544..19828d7eef5 100644
--- a/public/app/core/components/PermissionList/AddPermission.tsx
+++ b/public/app/core/components/PermissionList/AddPermission.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { UserPicker } from 'app/core/components/Picker/UserPicker';
-import { TeamPicker, Team } from 'app/core/components/Picker/TeamPicker';
-import DescriptionPicker, { OptionWithDescription } from 'app/core/components/Picker/DescriptionPicker';
+import { UserPicker } from 'app/core/components/Select/UserPicker';
+import { TeamPicker, Team } from 'app/core/components/Select/TeamPicker';
+import { Select, SelectOptionItem } from 'app/core/components/Select/Select';
 import { User } from 'app/types';
 import {
   dashboardPermissionLevels,
@@ -61,7 +61,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
     this.setState({ teamId: team && !Array.isArray(team) ? team.id : 0 });
   };
 
-  onPermissionChanged = (permission: OptionWithDescription) => {
+  onPermissionChanged = (permission: SelectOptionItem) => {
     this.setState({ permission: permission.value });
   };
 
@@ -121,11 +121,10 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
             ) : null}
 
             <div className="gf-form">
-              <DescriptionPicker
-                optionsWithDesc={dashboardPermissionLevels}
-                onSelected={this.onPermissionChanged}
-                disabled={false}
-                className={'gf-form-select-box__control--menu-right'}
+              <Select
+                options={dashboardPermissionLevels}
+                onChange={this.onPermissionChanged}
+                className="gf-form-select-box__control--menu-right"
               />
             </div>
 
diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
index ff679f67ae2..ae25aecce15 100644
--- a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import Select from 'app/core/components/Select/Select';
 import { dashboardPermissionLevels } from 'app/types/acl';
 
 export interface Props {
@@ -23,11 +23,11 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
         <td className="query-keyword">Can</td>
         <td>
           <div className="gf-form">
-            <DescriptionPicker
-              optionsWithDesc={dashboardPermissionLevels}
-              onSelected={() => {}}
-              disabled={true}
-              className={'gf-form-select-box__control--menu-right'}
+            <Select
+              options={dashboardPermissionLevels}
+              onChange={() => {}}
+              isDisabled={true}
+              className="gf-form-select-box__control--menu-right"
               value={item.permission}
             />
           </div>
diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx
index 56b6114d236..6b288bd9e6d 100644
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/PermissionListItem.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import { Select } from 'app/core/components/Select/Select';
 import { dashboardPermissionLevels, DashboardAcl, PermissionLevel } from 'app/types/acl';
 import { FolderInfo } from 'app/types';
 
@@ -74,11 +74,11 @@ export default class PermissionsListItem extends PureComponent<Props> {
         <td className="query-keyword">Can</td>
         <td>
           <div className="gf-form">
-            <DescriptionPicker
-              optionsWithDesc={dashboardPermissionLevels}
-              onSelected={this.onPermissionChanged}
-              disabled={item.inherited}
-              className={'gf-form-select-box__control--menu-right'}
+            <Select
+              options={dashboardPermissionLevels}
+              onChange={this.onPermissionChanged}
+              isDisabled={item.inherited}
+              className="gf-form-select-box__control--menu-right"
               value={item.permission}
             />
           </div>
diff --git a/public/app/core/components/Picker/DescriptionOption.tsx b/public/app/core/components/Picker/DescriptionOption.tsx
deleted file mode 100644
index 94b2b240dfc..00000000000
--- a/public/app/core/components/Picker/DescriptionOption.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import { OptionProps } from 'react-select/lib/components/Option';
-
-// https://github.com/JedWatson/react-select/issues/3038
-interface ExtendedOptionProps extends OptionProps<any> {
-  data: any;
-}
-
-export const Option = (props: ExtendedOptionProps) => {
-  const { children, isSelected, data } = props;
-
-  return (
-    <components.Option {...props}>
-      <div className="gf-form-select-box__desc-option">
-        <div className="gf-form-select-box__desc-option__body">
-          <div>{children}</div>
-          {data.description && <div className="gf-form-select-box__desc-option__desc">{data.description}</div>}
-        </div>
-        {isSelected && <i className="fa fa-check" aria-hidden="true" />}
-      </div>
-    </components.Option>
-  );
-};
-
-export default Option;
diff --git a/public/app/core/components/Picker/DescriptionPicker.tsx b/public/app/core/components/Picker/DescriptionPicker.tsx
deleted file mode 100644
index a917e3977f5..00000000000
--- a/public/app/core/components/Picker/DescriptionPicker.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import Select from 'react-select';
-import DescriptionOption from './DescriptionOption';
-import IndicatorsContainer from './IndicatorsContainer';
-import ResetStyles from './ResetStyles';
-import NoOptionsMessage from './NoOptionsMessage';
-
-export interface OptionWithDescription {
-  value: any;
-  label: string;
-  description: string;
-}
-
-export interface Props {
-  optionsWithDesc: OptionWithDescription[];
-  onSelected: (permission) => void;
-  disabled: boolean;
-  className?: string;
-  value?: any;
-}
-
-const getSelectedOption = (optionsWithDesc, value) => optionsWithDesc.find(option => option.value === value);
-
-class DescriptionPicker extends Component<Props, any> {
-  render() {
-    const { optionsWithDesc, onSelected, disabled, className, value } = this.props;
-    const selectedOption = getSelectedOption(optionsWithDesc, value);
-    return (
-      <div className="permissions-picker">
-        <Select
-          placeholder="Choose"
-          classNamePrefix={`gf-form-select-box`}
-          className={`width-7 gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-          options={optionsWithDesc}
-          components={{
-            Option: DescriptionOption,
-            IndicatorsContainer,
-            NoOptionsMessage,
-          }}
-          styles={ResetStyles}
-          isDisabled={disabled}
-          onChange={onSelected}
-          getOptionValue={i => i.value}
-          getOptionLabel={i => i.label}
-          value={selectedOption}
-        />
-      </div>
-    );
-  }
-}
-
-export default DescriptionPicker;
diff --git a/public/app/core/components/Picker/SimplePicker.tsx b/public/app/core/components/Picker/SimplePicker.tsx
deleted file mode 100644
index 18b8b4bfc02..00000000000
--- a/public/app/core/components/Picker/SimplePicker.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { SFC } from 'react';
-import Select from 'react-select';
-import DescriptionOption from './DescriptionOption';
-import IndicatorsContainer from './IndicatorsContainer';
-import ResetStyles from './ResetStyles';
-
-interface Props {
-  className?: string;
-  defaultValue?: any;
-  getOptionLabel: (item: any) => string;
-  getOptionValue: (item: any) => string;
-  onSelected: (item: any) => {} | void;
-  options: any[];
-  placeholder?: string;
-  width?: number;
-  value: any;
-}
-
-const SimplePicker: SFC<Props> = ({
-  className,
-  defaultValue,
-  getOptionLabel,
-  getOptionValue,
-  onSelected,
-  options,
-  placeholder,
-  width,
-  value,
-}) => {
-  return (
-    <Select
-      classNamePrefix="gf-form-select-box"
-      className={`${width ? 'width-' + width : ''} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-      components={{
-        Option: DescriptionOption,
-        IndicatorsContainer,
-      }}
-      defaultValue={defaultValue}
-      value={value}
-      getOptionLabel={getOptionLabel}
-      getOptionValue={getOptionValue}
-      menuShouldScrollIntoView={false}
-      isSearchable={false}
-      onChange={onSelected}
-      options={options}
-      placeholder={placeholder || 'Choose'}
-      styles={ResetStyles}
-    />
-  );
-};
-
-export default SimplePicker;
diff --git a/public/app/core/components/Picker/IndicatorsContainer.tsx b/public/app/core/components/Select/IndicatorsContainer.tsx
similarity index 100%
rename from public/app/core/components/Picker/IndicatorsContainer.tsx
rename to public/app/core/components/Select/IndicatorsContainer.tsx
diff --git a/public/app/core/components/Picker/NoOptionsMessage.tsx b/public/app/core/components/Select/NoOptionsMessage.tsx
similarity index 100%
rename from public/app/core/components/Picker/NoOptionsMessage.tsx
rename to public/app/core/components/Select/NoOptionsMessage.tsx
diff --git a/public/app/core/components/Picker/PickerOption.test.tsx b/public/app/core/components/Select/PickerOption.test.tsx
similarity index 100%
rename from public/app/core/components/Picker/PickerOption.test.tsx
rename to public/app/core/components/Select/PickerOption.test.tsx
diff --git a/public/app/core/components/Picker/PickerOption.tsx b/public/app/core/components/Select/PickerOption.tsx
similarity index 100%
rename from public/app/core/components/Picker/PickerOption.tsx
rename to public/app/core/components/Select/PickerOption.tsx
diff --git a/public/app/core/components/Picker/ResetStyles.tsx b/public/app/core/components/Select/ResetStyles.tsx
similarity index 100%
rename from public/app/core/components/Picker/ResetStyles.tsx
rename to public/app/core/components/Select/ResetStyles.tsx
diff --git a/public/app/core/components/Picker/Select.tsx b/public/app/core/components/Select/Select.tsx
similarity index 90%
rename from public/app/core/components/Picker/Select.tsx
rename to public/app/core/components/Select/Select.tsx
index 5b7cad5b921..e4cbb4a66df 100644
--- a/public/app/core/components/Picker/Select.tsx
+++ b/public/app/core/components/Select/Select.tsx
@@ -12,7 +12,7 @@ import ResetStyles from './ResetStyles';
 
 export interface SelectOptionItem {
   label?: string;
-  value?: string;
+  value?: any;
   imgUrl?: string;
   description?: string;
   [key: string]: any;
@@ -25,9 +25,11 @@ interface CommonProps {
   onChange: (item: SelectOptionItem) => {} | void;
   placeholder?: string;
   width?: number;
-  value?: SelectOptionItem;
+  value?: any;
   className?: string;
   components: object;
+  isDisabled?: boolean;
+  isSearchable: boolean;
 }
 
 interface SelectProps {
@@ -47,6 +49,8 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
     width: null,
     className: '',
     components: {},
+    isDisabled: false,
+    isSearchable: true,
   };
 
   render() {
@@ -60,6 +64,8 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
       width,
       value,
       className,
+      isDisabled,
+      isSearchable
     } = this.props;
 
     let widthClass = '';
@@ -83,11 +89,12 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
         getOptionLabel={getOptionLabel}
         getOptionValue={getOptionValue}
         menuShouldScrollIntoView={false}
-        isSearchable={false}
+        isSearchable={isSearchable}
         onChange={onChange}
         options={options}
         placeholder={placeholder || 'Choose'}
         styles={ResetStyles}
+        isDisabled={isDisabled}
       />
     );
   }
@@ -99,6 +106,8 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
     className: '',
     components: {},
     loadingMessage: () => 'Loading...',
+    isDisabled: false,
+    isSearchable: true,
   };
 
   render() {
@@ -116,6 +125,8 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
       isLoading,
       loadingMessage,
       noOptionsMessage,
+      isDisabled,
+      isSearchable,
     } = this.props;
 
     let widthClass = '';
@@ -140,7 +151,6 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
         getOptionLabel={getOptionLabel}
         getOptionValue={getOptionValue}
         menuShouldScrollIntoView={false}
-        isSearchable={false}
         onChange={onChange}
         loadOptions={loadOptions}
         isLoading={isLoading}
@@ -149,6 +159,8 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
         styles={ResetStyles}
         loadingMessage={loadingMessage}
         noOptionsMessage={noOptionsMessage}
+        isDisabled={isDisabled}
+        isSearchable={isSearchable}
       />
     );
   }
diff --git a/public/app/core/components/Picker/TeamPicker.test.tsx b/public/app/core/components/Select/TeamPicker.test.tsx
similarity index 100%
rename from public/app/core/components/Picker/TeamPicker.test.tsx
rename to public/app/core/components/Select/TeamPicker.test.tsx
diff --git a/public/app/core/components/Picker/TeamPicker.tsx b/public/app/core/components/Select/TeamPicker.tsx
similarity index 100%
rename from public/app/core/components/Picker/TeamPicker.tsx
rename to public/app/core/components/Select/TeamPicker.tsx
diff --git a/public/app/core/components/Picker/Unit/UnitGroup.tsx b/public/app/core/components/Select/Unit/UnitGroup.tsx
similarity index 100%
rename from public/app/core/components/Picker/Unit/UnitGroup.tsx
rename to public/app/core/components/Select/Unit/UnitGroup.tsx
diff --git a/public/app/core/components/Picker/Unit/UnitOption.tsx b/public/app/core/components/Select/Unit/UnitOption.tsx
similarity index 100%
rename from public/app/core/components/Picker/Unit/UnitOption.tsx
rename to public/app/core/components/Select/Unit/UnitOption.tsx
diff --git a/public/app/core/components/Picker/Unit/UnitPicker.tsx b/public/app/core/components/Select/Unit/UnitPicker.tsx
similarity index 100%
rename from public/app/core/components/Picker/Unit/UnitPicker.tsx
rename to public/app/core/components/Select/Unit/UnitPicker.tsx
diff --git a/public/app/core/components/Picker/UserPicker.test.tsx b/public/app/core/components/Select/UserPicker.test.tsx
similarity index 100%
rename from public/app/core/components/Picker/UserPicker.test.tsx
rename to public/app/core/components/Select/UserPicker.test.tsx
diff --git a/public/app/core/components/Picker/UserPicker.tsx b/public/app/core/components/Select/UserPicker.tsx
similarity index 96%
rename from public/app/core/components/Picker/UserPicker.tsx
rename to public/app/core/components/Select/UserPicker.tsx
index 97bdc230173..976b32e47a9 100644
--- a/public/app/core/components/Picker/UserPicker.tsx
+++ b/public/app/core/components/Select/UserPicker.tsx
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 
 // Components
-import { AsyncSelect } from 'app/core/components/Picker/Select';
+import { AsyncSelect } from './Select';
 
 // Utils & Services
 import { debounce } from 'lodash';
diff --git a/public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap b/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap
similarity index 100%
rename from public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap
rename to public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap
diff --git a/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
similarity index 100%
rename from public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
rename to public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
diff --git a/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
similarity index 100%
rename from public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
rename to public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index 1ab3f048a9b..d41626d9a2f 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { Label } from 'app/core/components/Label/Label';
-import Select from 'app/core/components/Picker/Select';
+import Select from 'app/core/components/Select/Select';
 import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
 
 import { DashboardSearchHit } from 'app/types';
@@ -92,6 +92,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
         <div className="gf-form">
           <span className="gf-form-label width-11">UI Theme</span>
           <Select
+            isSearchable={false}
             value={themes.find(item => item.value === theme)}
             options={themes}
             onChange={theme => this.onThemeChanged(theme.value)}
@@ -118,6 +119,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
         <div className="gf-form">
           <label className="gf-form-label width-11">Timezone</label>
           <Select
+            isSearchable={false}
             value={timezones.find(item => item.value === timezone)}
             onChange={timezone => this.onTimeZoneChanged(timezone.value)}
             options={timezones}
diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index 6a4203f8739..8d9cfa6fc6f 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import AsyncSelect from 'react-select/lib/Async';
 import { TagOption } from './TagOption';
 import { TagBadge } from './TagBadge';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
+import NoOptionsMessage from 'app/core/components/Select/NoOptionsMessage';
 import { components } from 'react-select';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import ResetStyles from 'app/core/components/Select/ResetStyles';
 
 export interface Props {
   tags: string[];
diff --git a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx b/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
index a4368170b12..57a09820219 100644
--- a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
+++ b/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
@@ -3,9 +3,9 @@ import React, { PureComponent } from 'react';
 import _ from 'lodash';
 
 // Components
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import { Option, SingleValue } from 'app/core/components/Picker/PickerOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
+import ResetStyles from 'app/core/components/Select/ResetStyles';
+import { Option, SingleValue } from 'app/core/components/Select/PickerOption';
+import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
 import Select from 'react-select';
 
 // Types
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 0d7d824b366..3d9d36207a2 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -25,10 +25,10 @@ import {
   makeTimeSeriesList,
   updateHistory,
 } from 'app/core/utils/explore';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import PickerOption from 'app/core/components/Picker/PickerOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+import ResetStyles from 'app/core/components/Select/ResetStyles';
+import PickerOption from 'app/core/components/Select/PickerOption';
+import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
+import NoOptionsMessage from 'app/core/components/Select/NoOptionsMessage';
 import TableModel from 'app/core/table_model';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { Emitter } from 'app/core/utils/emitter';
diff --git a/public/app/features/teams/TeamMembers.tsx b/public/app/features/teams/TeamMembers.tsx
index 433702fa0d5..0e20f4be664 100644
--- a/public/app/features/teams/TeamMembers.tsx
+++ b/public/app/features/teams/TeamMembers.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import SlideDown from 'app/core/components/Animations/SlideDown';
-import { UserPicker } from 'app/core/components/Picker/UserPicker';
+import { UserPicker } from 'app/core/components/Select/UserPicker';
 import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { TeamMember, User } from 'app/types';
diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx
index 630e2602407..1fdb3abf9d9 100644
--- a/public/app/plugins/panel/gauge/MappingRow.tsx
+++ b/public/app/plugins/panel/gauge/MappingRow.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
-import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import { Select } from 'app/core/components/Select/Select';
 import { MappingType, RangeMap, ValueMap } from 'app/types';
 
 interface Props {
@@ -135,13 +135,12 @@ export default class MappingRow extends PureComponent<Props, State> {
       <div className="mapping-row">
         <div className="gf-form-inline mapping-row-type">
           <Label width={5}>Type</Label>
-          <SimplePicker
+          <Select
             placeholder="Choose type"
+            isSearchable={false}
             options={mappingOptions}
             value={mappingOptions.find(o => o.value === type)}
-            getOptionLabel={i => i.label}
-            getOptionValue={i => i.value}
-            onSelected={type => this.onMappingTypeChange(type.value)}
+            onChange={type => this.onMappingTypeChange(type.value)}
             width={7}
           />
         </div>
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index 7cb1c90d347..1abad58329d 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
-import Select from 'app/core/components/Picker/Select';
-import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
+import Select from 'app/core/components/Select/Select';
+import UnitPicker from 'app/core/components/Select/Unit/UnitPicker';
 import { OptionModuleProps } from './module';
 
 const statOptions = [

From ae76ddcc3b6ecc7373b567d39d4d10c221a944d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 14 Dec 2018 14:05:47 +0100
Subject: [PATCH 04/10] explore using data source picker

---
 .../PermissionList/PermissionListItem.tsx     |  1 +
 .../components/Select}/DataSourcePicker.tsx   | 22 ++-----
 public/app/core/components/Select/Select.tsx  | 60 +++++++++++++++++--
 .../dashboard/dashgrid/QueriesTab.tsx         | 12 +---
 public/app/features/explore/Explore.tsx       | 34 +++--------
 public/app/types/explore.ts                   |  8 +--
 public/sass/components/_form_select_box.scss  |  4 +-
 7 files changed, 77 insertions(+), 64 deletions(-)
 rename public/app/{features/dashboard/dashgrid => core/components/Select}/DataSourcePicker.tsx (64%)

diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx
index 6b288bd9e6d..a97a57b965b 100644
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/PermissionListItem.tsx
@@ -75,6 +75,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
         <td>
           <div className="gf-form">
             <Select
+              isSearchable={false}
               options={dashboardPermissionLevels}
               onChange={this.onPermissionChanged}
               isDisabled={item.inherited}
diff --git a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx b/public/app/core/components/Select/DataSourcePicker.tsx
similarity index 64%
rename from public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
rename to public/app/core/components/Select/DataSourcePicker.tsx
index 57a09820219..9c33b052bdf 100644
--- a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
+++ b/public/app/core/components/Select/DataSourcePicker.tsx
@@ -3,16 +3,13 @@ import React, { PureComponent } from 'react';
 import _ from 'lodash';
 
 // Components
-import ResetStyles from 'app/core/components/Select/ResetStyles';
-import { Option, SingleValue } from 'app/core/components/Select/PickerOption';
-import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
-import Select from 'react-select';
+import Select from './Select';
 
 // Types
 import { DataSourceSelectItem } from 'app/types';
 
 export interface Props {
-  onChangeDataSource: (ds: DataSourceSelectItem) => void;
+  onChange: (ds: DataSourceSelectItem) => void;
   datasources: DataSourceSelectItem[];
   current: DataSourceSelectItem;
   onBlur?: () => void;
@@ -32,7 +29,7 @@ export class DataSourcePicker extends PureComponent<Props> {
 
   onChange = item => {
     const ds = this.props.datasources.find(ds => ds.name === item.value);
-    this.props.onChangeDataSource(ds);
+    this.props.onChange(ds);
   };
 
   render() {
@@ -53,27 +50,18 @@ export class DataSourcePicker extends PureComponent<Props> {
     return (
       <div className="gf-form-inline">
         <Select
-          classNamePrefix={`gf-form-select-box`}
           isMulti={false}
-          menuShouldScrollIntoView={false}
+          backspaceRemovesValue={false}
           isClearable={false}
-          className="gf-form-input gf-form-input--form-dropdown ds-picker"
-          onChange={item => this.onChange(item)}
+          onChange={this.onChange}
           options={options}
-          styles={ResetStyles}
           autoFocus={autoFocus}
           onBlur={onBlur}
           openMenuOnFocus={true}
           maxMenuHeight={500}
           placeholder="Select datasource"
-          loadingMessage={() => 'Loading datasources...'}
           noOptionsMessage={() => 'No datasources found'}
           value={value}
-          components={{
-            Option,
-            SingleValue,
-            IndicatorsContainer,
-          }}
         />
       </div>
     );
diff --git a/public/app/core/components/Select/Select.tsx b/public/app/core/components/Select/Select.tsx
index e4cbb4a66df..d43e47f52c3 100644
--- a/public/app/core/components/Select/Select.tsx
+++ b/public/app/core/components/Select/Select.tsx
@@ -29,7 +29,16 @@ interface CommonProps {
   className?: string;
   components: object;
   isDisabled?: boolean;
-  isSearchable: boolean;
+  isSearchable?: boolean;
+  isClearable?: boolean;
+  autoFocus?: boolean;
+  openMenuOnFocus?: boolean;
+  onBlur?: () => void;
+  maxMenuHeight?: number;
+  isLoading: boolean;
+  noOptionsMessage?: () => string;
+  isMulti?: boolean;
+  backspaceRemovesValue: boolean;
 }
 
 interface SelectProps {
@@ -39,9 +48,7 @@ interface SelectProps {
 interface AsyncProps {
   defaultOptions: boolean;
   loadOptions: (query: string) => Promise<SelectOptionItem[]>;
-  isLoading: boolean;
   loadingMessage?: () => string;
-  noOptionsMessage?: () => string;
 }
 
 export class Select extends PureComponent<CommonProps & SelectProps> {
@@ -51,6 +58,13 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
     components: {},
     isDisabled: false,
     isSearchable: true,
+    isClearable: false,
+    isMulti: false,
+    openMenuOnFocus: false,
+    autoFocus: false,
+    isLoading: false,
+    backspaceRemovesValue: true,
+    maxMenuHeight: 300,
   };
 
   render() {
@@ -65,7 +79,16 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
       value,
       className,
       isDisabled,
-      isSearchable
+      isLoading,
+      isSearchable,
+      isClearable,
+      backspaceRemovesValue,
+      isMulti,
+      autoFocus,
+      openMenuOnFocus,
+      onBlur,
+      maxMenuHeight,
+      noOptionsMessage,
     } = this.props;
 
     let widthClass = '';
@@ -95,6 +118,15 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
         placeholder={placeholder || 'Choose'}
         styles={ResetStyles}
         isDisabled={isDisabled}
+        isLoading={isLoading}
+        isClearable={isClearable}
+        autoFocus={autoFocus}
+        onBlur={onBlur}
+        openMenuOnFocus={openMenuOnFocus}
+        maxMenuHeight={maxMenuHeight}
+        noOptionsMessage={noOptionsMessage}
+        isMulti={isMulti}
+        backspaceRemovesValue={backspaceRemovesValue}
       />
     );
   }
@@ -107,7 +139,13 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
     components: {},
     loadingMessage: () => 'Loading...',
     isDisabled: false,
+    isClearable: false,
+    isMulti: false,
     isSearchable: true,
+    backspaceRemovesValue: true,
+    autoFocus: false,
+    openMenuOnFocus: false,
+    maxMenuHeight: 300,
   };
 
   render() {
@@ -127,6 +165,13 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
       noOptionsMessage,
       isDisabled,
       isSearchable,
+      isClearable,
+      backspaceRemovesValue,
+      autoFocus,
+      onBlur,
+      openMenuOnFocus,
+      maxMenuHeight,
+      isMulti,
     } = this.props;
 
     let widthClass = '';
@@ -161,6 +206,13 @@ export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
         noOptionsMessage={noOptionsMessage}
         isDisabled={isDisabled}
         isSearchable={isSearchable}
+        isClearable={isClearable}
+        autoFocus={autoFocus}
+        onBlur={onBlur}
+        openMenuOnFocus={openMenuOnFocus}
+        maxMenuHeight={maxMenuHeight}
+        isMulti={isMulti}
+        backspaceRemovesValue={backspaceRemovesValue}
       />
     );
   }
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index cd26defbed3..0f449efdc35 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -6,7 +6,7 @@ import _ from 'lodash';
 // Components
 import './../../panel/metrics_tab';
 import { EditorTabBody } from './EditorTabBody';
-import { DataSourcePicker } from './DataSourcePicker';
+import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
@@ -205,20 +205,14 @@ export class QueriesTab extends PureComponent<Props, State> {
   renderToolbar = () => {
     const { currentDS } = this.state;
 
-    return (
-      <DataSourcePicker
-        datasources={this.datasources}
-        onChangeDataSource={this.onChangeDataSource}
-        current={currentDS}
-      />
-    );
+    return <DataSourcePicker datasources={this.datasources} onChange={this.onChangeDataSource} current={currentDS} />;
   };
 
   renderMixedPicker = () => {
     return (
       <DataSourcePicker
         datasources={this.datasources}
-        onChangeDataSource={this.onAddMixedQuery}
+        onChange={this.onAddMixedQuery}
         current={null}
         autoFocus={true}
         onBlur={this.onMixedPickerBlur}
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 3d9d36207a2..dee59529cfd 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { hot } from 'react-hot-loader';
-import Select from 'react-select';
 import _ from 'lodash';
 
 import { DataSource } from 'app/types/datasources';
@@ -25,10 +24,7 @@ import {
   makeTimeSeriesList,
   updateHistory,
 } from 'app/core/utils/explore';
-import ResetStyles from 'app/core/components/Select/ResetStyles';
-import PickerOption from 'app/core/components/Select/PickerOption';
-import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
-import NoOptionsMessage from 'app/core/components/Select/NoOptionsMessage';
+import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import TableModel from 'app/core/table_model';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { Emitter } from 'app/core/utils/emitter';
@@ -158,10 +154,12 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     if (!datasourceSrv) {
       throw new Error('No datasource service passed as props.');
     }
+
     const datasources = datasourceSrv.getExternal();
     const exploreDatasources = datasources.map(ds => ({
       value: ds.name,
-      label: ds.name,
+      name: ds.name,
+      meta: ds.meta,
     }));
 
     if (datasources.length > 0) {
@@ -885,7 +883,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     } = this.state;
     const graphHeight = showingGraph && showingTable ? '200px' : '400px';
     const exploreClass = split ? 'explore explore-split' : 'explore';
-    const selectedDatasource = datasource ? exploreDatasources.find(d => d.label === datasource.name) : undefined;
+    const selectedDatasource = datasource ? exploreDatasources.find(d => d.name === datasource.name) : undefined;
     const graphLoading = queryTransactions.some(qt => qt.resultType === 'Graph' && !qt.done);
     const tableLoading = queryTransactions.some(qt => qt.resultType === 'Table' && !qt.done);
     const logsLoading = queryTransactions.some(qt => qt.resultType === 'Logs' && !qt.done);
@@ -910,26 +908,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           )}
           {!datasourceMissing ? (
             <div className="navbar-buttons">
-              <Select
-                classNamePrefix={`gf-form-select-box`}
-                isMulti={false}
-                menuShouldScrollIntoView={false}
-                isLoading={datasourceLoading}
-                isClearable={false}
-                className="gf-form-input gf-form-input--form-dropdown datasource-picker"
+              <DataSourcePicker
                 onChange={this.onChangeDatasource}
-                options={exploreDatasources}
-                styles={ResetStyles}
-                maxMenuHeight={500}
-                placeholder="Select datasource"
-                loadingMessage={() => 'Loading datasources...'}
-                noOptionsMessage={() => 'No datasources found'}
-                value={selectedDatasource}
-                components={{
-                  Option: PickerOption,
-                  IndicatorsContainer,
-                  NoOptionsMessage,
-                }}
+                datasources={exploreDatasources}
+                current={selectedDatasource}
               />
             </div>
           ) : null}
diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts
index 5152e26af39..80d55eedb60 100644
--- a/public/app/types/explore.ts
+++ b/public/app/types/explore.ts
@@ -3,6 +3,7 @@ import { Value } from 'slate';
 import { DataQuery, RawTimeRange } from './series';
 import TableModel from 'app/core/table_model';
 import { LogsModel } from 'app/core/logs_model';
+import { DataSourceSelectItem } from 'app/types/datasources';
 
 export interface CompletionItem {
   /**
@@ -74,11 +75,6 @@ export interface CompletionItemGroup {
   skipSort?: boolean;
 }
 
-interface ExploreDatasource {
-  value: string;
-  label: string;
-}
-
 export interface HistoryItem {
   ts: number;
   query: DataQuery;
@@ -159,7 +155,7 @@ export interface ExploreState {
   datasourceLoading: boolean | null;
   datasourceMissing: boolean;
   datasourceName?: string;
-  exploreDatasources: ExploreDatasource[];
+  exploreDatasources: DataSourceSelectItem[];
   graphInterval: number; // in ms
   graphResult?: any[];
   history: HistoryItem[];
diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index aecc21d8176..940bb0143b0 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -116,7 +116,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 .gf-form-select-box__select-arrow {
   border-color: $input-color-select-arrow transparent transparent;
   border-style: solid;
-  border-width: 5px 5px 2.5px;
+  border-width: 4px 4px 2.5px;
   display: inline-block;
   height: 0;
   width: 0;
@@ -125,7 +125,7 @@ $select-input-bg-disabled: $input-bg-disabled;
   &.gf-form-select-box__select-arrow--reversed {
     border-color: transparent transparent $input-color-select-arrow;
     top: -2px;
-    border-width: 0 5px 5px;
+    border-width: 0 4px 4px;
   }
 }
 

From cb7ffb4415ca1baa0bed26cd4905f9a10abcde2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 14 Dec 2018 14:19:39 +0100
Subject: [PATCH 05/10] select refactor fixes

---
 .../PermissionList/AddPermission.tsx          |  1 +
 .../DisabledPermissionListItem.tsx            |  3 ++-
 .../PermissionList/PermissionListItem.tsx     |  3 ++-
 .../components/Select/DataSourcePicker.tsx    |  2 +-
 public/app/core/components/Select/Select.tsx  |  2 +-
 .../app/core/components/Select/TeamPicker.tsx | 20 +++----------------
 6 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx
index 19828d7eef5..749bef680bf 100644
--- a/public/app/core/components/PermissionList/AddPermission.tsx
+++ b/public/app/core/components/PermissionList/AddPermission.tsx
@@ -122,6 +122,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
 
             <div className="gf-form">
               <Select
+                isSearchable={false}
                 options={dashboardPermissionLevels}
                 onChange={this.onPermissionChanged}
                 className="gf-form-select-box__control--menu-right"
diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
index ae25aecce15..d3f9ddbb1fb 100644
--- a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
@@ -9,6 +9,7 @@ export interface Props {
 export default class DisabledPermissionListItem extends Component<Props, any> {
   render() {
     const { item } = this.props;
+    const currentPermissionLevel = dashboardPermissionLevels.find(dp => dp.value === item.permission);
 
     return (
       <tr className="gf-form-disabled">
@@ -28,7 +29,7 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
               onChange={() => {}}
               isDisabled={true}
               className="gf-form-select-box__control--menu-right"
-              value={item.permission}
+              value={currentPermissionLevel}
             />
           </div>
         </td>
diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx
index a97a57b965b..e726667cfbb 100644
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/PermissionListItem.tsx
@@ -50,6 +50,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
   render() {
     const { item, folderInfo } = this.props;
     const inheritedFromRoot = item.dashboardId === -1 && !item.inherited;
+    const currentPermissionLevel = dashboardPermissionLevels.find(dp => dp.value === item.permission);
 
     return (
       <tr className={setClassNameHelper(item.inherited)}>
@@ -80,7 +81,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
               onChange={this.onPermissionChanged}
               isDisabled={item.inherited}
               className="gf-form-select-box__control--menu-right"
-              value={item.permission}
+              value={currentPermissionLevel}
             />
           </div>
         </td>
diff --git a/public/app/core/components/Select/DataSourcePicker.tsx b/public/app/core/components/Select/DataSourcePicker.tsx
index 9c33b052bdf..c0d6a21e5c1 100644
--- a/public/app/core/components/Select/DataSourcePicker.tsx
+++ b/public/app/core/components/Select/DataSourcePicker.tsx
@@ -51,8 +51,8 @@ export class DataSourcePicker extends PureComponent<Props> {
       <div className="gf-form-inline">
         <Select
           isMulti={false}
-          backspaceRemovesValue={false}
           isClearable={false}
+          backspaceRemovesValue={false}
           onChange={this.onChange}
           options={options}
           autoFocus={autoFocus}
diff --git a/public/app/core/components/Select/Select.tsx b/public/app/core/components/Select/Select.tsx
index d43e47f52c3..ebd318842aa 100644
--- a/public/app/core/components/Select/Select.tsx
+++ b/public/app/core/components/Select/Select.tsx
@@ -25,7 +25,7 @@ interface CommonProps {
   onChange: (item: SelectOptionItem) => {} | void;
   placeholder?: string;
   width?: number;
-  value?: any;
+  value?: SelectOptionItem;
   className?: string;
   components: object;
   isDisabled?: boolean;
diff --git a/public/app/core/components/Select/TeamPicker.tsx b/public/app/core/components/Select/TeamPicker.tsx
index 31b78b19830..6449114cfff 100644
--- a/public/app/core/components/Select/TeamPicker.tsx
+++ b/public/app/core/components/Select/TeamPicker.tsx
@@ -1,11 +1,7 @@
 import React, { Component } from 'react';
-import AsyncSelect from 'react-select/lib/Async';
-import PickerOption from './PickerOption';
+import { AsyncSelect } from './Select';
 import { debounce } from 'lodash';
 import { getBackendSrv } from 'app/core/services/backend_srv';
-import ResetStyles from './ResetStyles';
-import IndicatorsContainer from './IndicatorsContainer';
-import NoOptionsMessage from './NoOptionsMessage';
 
 export interface Team {
   id: number;
@@ -45,6 +41,7 @@ export class TeamPicker extends Component<Props, State> {
       const teams = result.teams.map(team => {
         return {
           id: team.id,
+          value: team.id,
           label: team.name,
           name: team.name,
           imgUrl: team.avatarUrl,
@@ -62,24 +59,13 @@ export class TeamPicker extends Component<Props, State> {
     return (
       <div className="user-picker">
         <AsyncSelect
-          classNamePrefix={`gf-form-select-box`}
-          isMulti={false}
           isLoading={isLoading}
           defaultOptions={true}
           loadOptions={this.debouncedSearch}
           onChange={onSelected}
-          className={`gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-          styles={ResetStyles}
-          components={{
-            Option: PickerOption,
-            IndicatorsContainer,
-            NoOptionsMessage,
-          }}
+          className={className}
           placeholder="Select a team"
-          loadingMessage={() => 'Loading...'}
           noOptionsMessage={() => 'No teams found'}
-          getOptionValue={i => i.id}
-          getOptionLabel={i => i.label}
         />
       </div>
     );

From 9e4547f7875bde8103af638e84555ec8d903fcdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 14 Dec 2018 14:25:35 +0100
Subject: [PATCH 06/10] fixed cloudwatch issue

---
 .../cloudwatch/query_parameter_ctrl.ts        | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts b/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
index ba5a39688b3..33948ef2345 100644
--- a/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
+++ b/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
@@ -2,21 +2,6 @@ import angular from 'angular';
 import coreModule from 'app/core/core_module';
 import _ from 'lodash';
 
-export class CloudWatchQueryParameter {
-  constructor() {
-    return {
-      templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/query.parameter.html',
-      controller: 'CloudWatchQueryParameterCtrl',
-      restrict: 'E',
-      scope: {
-        target: '=',
-        datasource: '=',
-        onChange: '&',
-      },
-    };
-  }
-}
-
 export class CloudWatchQueryParameterCtrl {
   /** @ngInject */
   constructor($scope, templateSrv, uiSegmentSrv, datasourceSrv, $q) {
@@ -240,5 +225,17 @@ export class CloudWatchQueryParameterCtrl {
   }
 }
 
-coreModule.directive('cloudwatchQueryParameter', CloudWatchQueryParameter);
-coreModule.controller('CloudWatchQueryParameterCtrl', CloudWatchQueryParameterCtrl);
+export function cloudWatchQueryParameter() {
+  return {
+    templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/query.parameter.html',
+    controller: CloudWatchQueryParameterCtrl,
+    restrict: 'E',
+    scope: {
+      target: '=',
+      datasource: '=',
+      onChange: '&',
+    },
+  };
+}
+
+coreModule.directive('cloudwatchQueryParameter', cloudWatchQueryParameter);

From 84df0e2dde317bea1f381a0a79f725c0011beeec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 14 Dec 2018 15:25:49 +0100
Subject: [PATCH 07/10] Added custom scrollbar to select component

---
 .../components/CustomScrollbar/CustomScrollbar.tsx    |  4 ++--
 public/app/core/components/Select/Select.tsx          | 11 +++++++++++
 public/sass/components/_form_select_box.scss          |  1 +
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx b/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
index 9b9a9c4d02a..590c11c0615 100644
--- a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
@@ -28,8 +28,8 @@ class CustomScrollbar extends PureComponent<Props> {
       <Scrollbars
         className={customClassName}
         autoHeight={true}
-        autoHeightMin={'100%'}
-        autoHeightMax={'100%'}
+        autoHeightMin={'inherit'}
+        autoHeightMax={'inherit'}
         renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
         renderTrackVertical={props => <div {...props} className="track-vertical" />}
         renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
diff --git a/public/app/core/components/Select/Select.tsx b/public/app/core/components/Select/Select.tsx
index ebd318842aa..09c8e2ceb8e 100644
--- a/public/app/core/components/Select/Select.tsx
+++ b/public/app/core/components/Select/Select.tsx
@@ -3,12 +3,14 @@ import classNames from 'classnames';
 import React, { PureComponent } from 'react';
 import { default as ReactSelect } from 'react-select';
 import { default as ReactAsyncSelect } from 'react-select/lib/Async';
+import { components } from 'react-select';
 
 // Components
 import { Option, SingleValue } from './PickerOption';
 import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
 import ResetStyles from './ResetStyles';
+import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
 
 export interface SelectOptionItem {
   label?: string;
@@ -51,6 +53,14 @@ interface AsyncProps {
   loadingMessage?: () => string;
 }
 
+export const MenuList = props => {
+  return (
+    <components.MenuList {...props}>
+      <CustomScrollbar autoHide={false}>{props.children}</CustomScrollbar>
+    </components.MenuList>
+  );
+};
+
 export class Select extends PureComponent<CommonProps & SelectProps> {
   static defaultProps = {
     width: null,
@@ -106,6 +116,7 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
           Option,
           SingleValue,
           IndicatorsContainer,
+          MenuList,
         }}
         defaultValue={defaultValue}
         value={value}
diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index 940bb0143b0..4aa5f54a3d0 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -79,6 +79,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 .gf-form-select-box__option {
   border-left: 2px solid transparent;
   white-space: nowrap;
+  background-color: $input-bg;
 
   &.gf-form-select-box__option--is-focused {
     color: $dropdownLinkColorHover;

From 677eb6d1797c3b434bdb021899a23a8ab0decbea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 14 Dec 2018 16:27:48 +0100
Subject: [PATCH 08/10] fixes to unit picker

---
 .../components/Select/DataSourcePicker.tsx    |  1 +
 .../{Unit/UnitGroup.tsx => OptionGroup.tsx}   | 10 +--
 public/app/core/components/Select/Select.tsx  |  4 +-
 .../components/Select/Unit/UnitOption.tsx     | 22 -----
 .../components/Select/Unit/UnitPicker.tsx     | 81 -------------------
 .../app/core/components/Select/UnitPicker.tsx | 51 ++++++++++++
 .../app/plugins/panel/gauge/ValueOptions.tsx  |  4 +-
 public/sass/_grafana.scss                     |  1 -
 public/sass/components/_form_select_box.scss  | 16 ++++
 public/sass/components/_unit-picker.scss      | 24 ------
 10 files changed, 77 insertions(+), 137 deletions(-)
 rename public/app/core/components/Select/{Unit/UnitGroup.tsx => OptionGroup.tsx} (71%)
 delete mode 100644 public/app/core/components/Select/Unit/UnitOption.tsx
 delete mode 100644 public/app/core/components/Select/Unit/UnitPicker.tsx
 create mode 100644 public/app/core/components/Select/UnitPicker.tsx
 delete mode 100644 public/sass/components/_unit-picker.scss

diff --git a/public/app/core/components/Select/DataSourcePicker.tsx b/public/app/core/components/Select/DataSourcePicker.tsx
index c0d6a21e5c1..1a9081038c0 100644
--- a/public/app/core/components/Select/DataSourcePicker.tsx
+++ b/public/app/core/components/Select/DataSourcePicker.tsx
@@ -50,6 +50,7 @@ export class DataSourcePicker extends PureComponent<Props> {
     return (
       <div className="gf-form-inline">
         <Select
+          className="ds-picker"
           isMulti={false}
           isClearable={false}
           backspaceRemovesValue={false}
diff --git a/public/app/core/components/Select/Unit/UnitGroup.tsx b/public/app/core/components/Select/OptionGroup.tsx
similarity index 71%
rename from public/app/core/components/Select/Unit/UnitGroup.tsx
rename to public/app/core/components/Select/OptionGroup.tsx
index d1dc5405d25..a001f58c681 100644
--- a/public/app/core/components/Select/Unit/UnitGroup.tsx
+++ b/public/app/core/components/Select/OptionGroup.tsx
@@ -9,7 +9,7 @@ interface State {
   expanded: boolean;
 }
 
-export default class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
+export default class OptionGroup extends PureComponent<ExtendedGroupProps, State> {
   state = {
     expanded: false,
   };
@@ -41,10 +41,10 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State>
     const { expanded } = this.state;
 
     return (
-      <div className="width-21 unit-picker-group" style={{ marginBottom: '5px' }}>
-        <div className="unit-picker-group-item" onClick={this.onToggleChildren}>
-          <span style={{ textTransform: 'capitalize' }}>{label}</span>
-          <i className={`fa ${expanded ? 'fa-minus' : 'fa-plus'}`} />{' '}
+      <div className="gf-form-select-box__option-group">
+        <div className="gf-form-select-box__option-group__header" onClick={this.onToggleChildren}>
+          <span className="flex-grow">{label}</span>
+          <i className={`fa ${expanded ? 'fa-caret-left' : 'fa-caret-down'}`} />{' '}
         </div>
         {expanded && children}
       </div>
diff --git a/public/app/core/components/Select/Select.tsx b/public/app/core/components/Select/Select.tsx
index 09c8e2ceb8e..4d4434fec25 100644
--- a/public/app/core/components/Select/Select.tsx
+++ b/public/app/core/components/Select/Select.tsx
@@ -7,6 +7,7 @@ import { components } from 'react-select';
 
 // Components
 import { Option, SingleValue } from './PickerOption';
+import OptionGroup from './OptionGroup';
 import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
 import ResetStyles from './ResetStyles';
@@ -29,7 +30,6 @@ interface CommonProps {
   width?: number;
   value?: SelectOptionItem;
   className?: string;
-  components: object;
   isDisabled?: boolean;
   isSearchable?: boolean;
   isClearable?: boolean;
@@ -65,7 +65,6 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
   static defaultProps = {
     width: null,
     className: '',
-    components: {},
     isDisabled: false,
     isSearchable: true,
     isClearable: false,
@@ -117,6 +116,7 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
           SingleValue,
           IndicatorsContainer,
           MenuList,
+          Group: OptionGroup,
         }}
         defaultValue={defaultValue}
         value={value}
diff --git a/public/app/core/components/Select/Unit/UnitOption.tsx b/public/app/core/components/Select/Unit/UnitOption.tsx
deleted file mode 100644
index 19986b28670..00000000000
--- a/public/app/core/components/Select/Unit/UnitOption.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { SFC } from 'react';
-import { components } from 'react-select';
-import { OptionProps } from 'react-select/lib/components/Option';
-
-interface ExtendedOptionProps extends OptionProps<any> {
-  data: any;
-}
-
-const UnitOption: SFC<ExtendedOptionProps> = props => {
-  const { children, isSelected, className } = props;
-
-  return (
-    <components.Option {...props}>
-      <div className={`unit-picker-option__button btn btn-link ${className}`}>
-        {isSelected && <i className="fa fa-check pull-right" aria-hidden="true" />}
-        <div className="gf-form">{children}</div>
-      </div>
-    </components.Option>
-  );
-};
-
-export default UnitOption;
diff --git a/public/app/core/components/Select/Unit/UnitPicker.tsx b/public/app/core/components/Select/Unit/UnitPicker.tsx
deleted file mode 100644
index f5c76e43fe4..00000000000
--- a/public/app/core/components/Select/Unit/UnitPicker.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { PureComponent } from 'react';
-import Select from 'react-select';
-import UnitGroup from './UnitGroup';
-import UnitOption from './UnitOption';
-import ResetStyles from '../ResetStyles';
-import kbn from '../../../utils/kbn';
-
-interface Props {
-  onSelected: (item: any) => {} | void;
-  defaultValue?: string;
-  width?: number;
-}
-
-export default class UnitPicker extends PureComponent<Props> {
-  static defaultProps = {
-    width: 12,
-  };
-
-  render() {
-    const { defaultValue, onSelected, width } = this.props;
-
-    const unitGroups = kbn.getUnitFormats();
-
-    // Need to transform the data structure to work well with Select
-    const groupOptions = unitGroups.map(group => {
-      const options = group.submenu.map(unit => {
-        return {
-          label: unit.text,
-          value: unit.value,
-        };
-      });
-
-      return {
-        label: group.text,
-        options,
-      };
-    });
-
-    // const styles = {
-    //   ...ResetStyles,
-    //   menu: () => ({
-    //     maxHeight: '75%',
-    //     overflow: 'scroll',
-    //   }),
-    //   menuList: () =>
-    //     ({
-    //       overflowY: 'auto',
-    //       position: 'relative',
-    //     } as React.CSSProperties),
-    //   valueContainer: () =>
-    //     ({
-    //       overflow: 'hidden',
-    //       textOverflow: 'ellipsis',
-    //       maxWidth: '90px',
-    //       whiteSpace: 'nowrap',
-    //     } as React.CSSProperties),
-    // };
-
-    const value = groupOptions.map(group => {
-      return group.options.find(option => option.value === defaultValue);
-    });
-
-    return (
-      <Select
-        classNamePrefix="gf-form-select-box"
-        className={`width-${width} gf-form-input gf-form-input--form-dropdown`}
-        defaultValue={value}
-        isSearchable={true}
-        menuShouldScrollIntoView={false}
-        options={groupOptions}
-        placeholder="Choose"
-        onChange={onSelected}
-        components={{
-          Group: UnitGroup,
-          Option: UnitOption,
-        }}
-        styles={ResetStyles}
-      />
-    );
-  }
-}
diff --git a/public/app/core/components/Select/UnitPicker.tsx b/public/app/core/components/Select/UnitPicker.tsx
new file mode 100644
index 00000000000..da9d4526d2b
--- /dev/null
+++ b/public/app/core/components/Select/UnitPicker.tsx
@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react';
+import Select from './Select';
+import kbn from 'app/core/utils/kbn';
+
+interface Props {
+  onChange: (item: any) => {} | void;
+  defaultValue?: string;
+  width?: number;
+}
+
+export default class UnitPicker extends PureComponent<Props> {
+  static defaultProps = {
+    width: 12,
+  };
+
+  render() {
+    const { defaultValue, onChange, width } = this.props;
+
+    const unitGroups = kbn.getUnitFormats();
+
+    // Need to transform the data structure to work well with Select
+    const groupOptions = unitGroups.map(group => {
+      const options = group.submenu.map(unit => {
+        return {
+          label: unit.text,
+          value: unit.value,
+        };
+      });
+
+      return {
+        label: group.text,
+        options,
+      };
+    });
+
+    const value = groupOptions.map(group => {
+      return group.options.find(option => option.value === defaultValue);
+    });
+
+    return (
+      <Select
+        width={width}
+        defaultValue={value}
+        isSearchable={true}
+        options={groupOptions}
+        placeholder="Choose"
+        onChange={onChange}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index 1abad58329d..7f4142753b8 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Label } from 'app/core/components/Label/Label';
 import Select from 'app/core/components/Select/Select';
-import UnitPicker from 'app/core/components/Select/Unit/UnitPicker';
+import UnitPicker from 'app/core/components/Select/UnitPicker';
 import { OptionModuleProps } from './module';
 
 const statOptions = [
@@ -52,7 +52,7 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> {
         </div>
         <div className="gf-form-inline">
           <Label width={labelWidth}>Unit</Label>
-          <UnitPicker defaultValue={unit} onSelected={value => this.onUnitChange(value)} />
+          <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
         </div>
         <div className="gf-form-inline">
           <Label width={labelWidth}>Decimals</Label>
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index f75425d6b32..bfb186c0b02 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -101,7 +101,6 @@
 @import 'components/delete_button';
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
-@import 'components/unit-picker';
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
 @import 'components/value-mappings';
diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index 4aa5f54a3d0..a83ca95d038 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -171,3 +171,19 @@ $select-input-bg-disabled: $input-bg-disabled;
   width: 16px;
   margin-right: 10px;
 }
+
+.gf-form-select-box__option-group__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  justify-items: center;
+  cursor: pointer;
+  padding: 7px 10px;
+  width: 100%;
+  border-bottom: 1px solid $hr-border-color;
+  text-transform: capitalize;
+
+  .fa {
+    padding-right: 2px;
+  }
+}
diff --git a/public/sass/components/_unit-picker.scss b/public/sass/components/_unit-picker.scss
deleted file mode 100644
index 4b7bb1b8e7b..00000000000
--- a/public/sass/components/_unit-picker.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.unit-picker-option {
-  position: relative;
-  width: 100%;
-  display: block;
-  border-radius: 0;
-  white-space: normal;
-
-  i.fa-check {
-    padding-left: 2px;
-  }
-}
-
-.unit-picker-group {
-  margin-bottom: 5px;
-}
-
-.unit-picker-group-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  font-size: 14px;
-  border-bottom: 1px solid #555;
-}

From beff16bc8d3c8025f61114a894dd7bc7347f44ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 14 Dec 2018 16:38:52 +0100
Subject: [PATCH 09/10] updated snapshot

---
 .../__snapshots__/CustomScrollbar.test.tsx.snap           | 8 ++++----
 public/app/core/components/code_editor/code_editor.ts     | 2 +-
 public/sass/components/_query_editor.scss                 | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
index 37d8cea45be..310eb714af9 100644
--- a/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
+++ b/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
@@ -6,8 +6,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
   style={
     Object {
       "height": "auto",
-      "maxHeight": "100%",
-      "minHeight": "100%",
+      "maxHeight": "inherit",
+      "minHeight": "inherit",
       "overflow": "hidden",
       "position": "relative",
       "width": "100%",
@@ -23,8 +23,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
         "left": undefined,
         "marginBottom": 0,
         "marginRight": 0,
-        "maxHeight": "calc(100% + 0px)",
-        "minHeight": "calc(100% + 0px)",
+        "maxHeight": "calc(inherit + 0px)",
+        "minHeight": "calc(inherit + 0px)",
         "overflow": "scroll",
         "position": "relative",
         "right": undefined,
diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts
index 50ff55f3083..20a8384ee33 100644
--- a/public/app/core/components/code_editor/code_editor.ts
+++ b/public/app/core/components/code_editor/code_editor.ts
@@ -84,7 +84,7 @@ function link(scope, elem, attrs) {
   // disable depreacation warning
   codeEditor.$blockScrolling = Infinity;
   // Padding hacks
-  (codeEditor.renderer as any).setScrollMargin(15, 15);
+  (codeEditor.renderer as any).setScrollMargin(10, 10);
   codeEditor.renderer.setPadding(10);
 
   setThemeMode();
diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss
index 17280a99cc6..ff3c87f6d9d 100644
--- a/public/sass/components/_query_editor.scss
+++ b/public/sass/components/_query_editor.scss
@@ -59,6 +59,8 @@
 }
 
 .gf-form-query-letter-cell {
+  flex-shrink: 0;
+
   .gf-form-query-letter-cell-carret {
     display: inline-block;
     width: 0.7rem;

From 6e2f6701aca93de0cbf58e2cf7a7e3c9ef895ae6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 14 Dec 2018 16:48:13 +0100
Subject: [PATCH 10/10] minor style fix

---
 public/sass/components/_switch.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
index 88a959f5117..ab100a8c752 100644
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -97,10 +97,10 @@ input:checked + .gf-form-switch__slider::before {
   &--transparent {
     background: transparent;
     border: none;
-    width: 20px;
+    width: 23px;
     height: auto;
     position: relative;
-    padding-left: 7px;
+    padding-left: 8px;
   }
 
   &--table-cell {