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] 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 = [