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] 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>
     );