select refactor fixes

public/app/core/components/PermissionList/AddPermission.tsx

@@ -122,6 +122,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
 
 
             <div className="gf-form">
             <div className="gf-form">
               <Select
               <Select
+                isSearchable={false}
                 options={dashboardPermissionLevels}
                 options={dashboardPermissionLevels}
                 onChange={this.onPermissionChanged}
                 onChange={this.onPermissionChanged}
                 className="gf-form-select-box__control--menu-right"
                 className="gf-form-select-box__control--menu-right"

public/app/core/components/PermissionList/DisabledPermissionListItem.tsx

@@ -9,6 +9,7 @@ export interface Props {
 export default class DisabledPermissionListItem extends Component<Props, any> {
 export default class DisabledPermissionListItem extends Component<Props, any> {
   render() {
   render() {
     const { item } = this.props;
     const { item } = this.props;
+    const currentPermissionLevel = dashboardPermissionLevels.find(dp => dp.value === item.permission);
 
 
     return (
     return (
       <tr className="gf-form-disabled">
       <tr className="gf-form-disabled">
@@ -28,7 +29,7 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
               onChange={() => {}}
               onChange={() => {}}
               isDisabled={true}
               isDisabled={true}
               className="gf-form-select-box__control--menu-right"
               className="gf-form-select-box__control--menu-right"
-              value={item.permission}
+              value={currentPermissionLevel}
             />
             />
           </div>
           </div>
         </td>
         </td>

public/app/core/components/PermissionList/PermissionListItem.tsx

@@ -50,6 +50,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
   render() {
   render() {
     const { item, folderInfo } = this.props;
     const { item, folderInfo } = this.props;
     const inheritedFromRoot = item.dashboardId === -1 && !item.inherited;
     const inheritedFromRoot = item.dashboardId === -1 && !item.inherited;
+    const currentPermissionLevel = dashboardPermissionLevels.find(dp => dp.value === item.permission);
 
 
     return (
     return (
       <tr className={setClassNameHelper(item.inherited)}>
       <tr className={setClassNameHelper(item.inherited)}>
@@ -80,7 +81,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
               onChange={this.onPermissionChanged}
               onChange={this.onPermissionChanged}
               isDisabled={item.inherited}
               isDisabled={item.inherited}
               className="gf-form-select-box__control--menu-right"
               className="gf-form-select-box__control--menu-right"
-              value={item.permission}
+              value={currentPermissionLevel}
             />
             />
           </div>
           </div>
         </td>
         </td>

public/app/core/components/Select/DataSourcePicker.tsx

@@ -51,8 +51,8 @@ export class DataSourcePicker extends PureComponent<Props> {
       <div className="gf-form-inline">
       <div className="gf-form-inline">
         <Select
         <Select
           isMulti={false}
           isMulti={false}
-          backspaceRemovesValue={false}
           isClearable={false}
           isClearable={false}
+          backspaceRemovesValue={false}
           onChange={this.onChange}
           onChange={this.onChange}
           options={options}
           options={options}
           autoFocus={autoFocus}
           autoFocus={autoFocus}

public/app/core/components/Select/Select.tsx

@@ -25,7 +25,7 @@ interface CommonProps {
   onChange: (item: SelectOptionItem) => {} | void;
   onChange: (item: SelectOptionItem) => {} | void;
   placeholder?: string;
   placeholder?: string;
   width?: number;
   width?: number;
-  value?: any;
+  value?: SelectOptionItem;
   className?: string;
   className?: string;
   components: object;
   components: object;
   isDisabled?: boolean;
   isDisabled?: boolean;

public/app/core/components/Select/TeamPicker.tsx

 import React, { Component } from 'react';
 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 { debounce } from 'lodash';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { getBackendSrv } from 'app/core/services/backend_srv';
-import ResetStyles from './ResetStyles';
-import IndicatorsContainer from './IndicatorsContainer';
-import NoOptionsMessage from './NoOptionsMessage';
 
 
 export interface Team {
 export interface Team {
   id: number;
   id: number;
@@ -45,6 +41,7 @@ export class TeamPicker extends Component<Props, State> {
       const teams = result.teams.map(team => {
       const teams = result.teams.map(team => {
         return {
         return {
           id: team.id,
           id: team.id,
+          value: team.id,
           label: team.name,
           label: team.name,
           name: team.name,
           name: team.name,
           imgUrl: team.avatarUrl,
           imgUrl: team.avatarUrl,
@@ -62,24 +59,13 @@ export class TeamPicker extends Component<Props, State> {
     return (
     return (
       <div className="user-picker">
       <div className="user-picker">
         <AsyncSelect
         <AsyncSelect
-          classNamePrefix={`gf-form-select-box`}
-          isMulti={false}
           isLoading={isLoading}
           isLoading={isLoading}
           defaultOptions={true}
           defaultOptions={true}
           loadOptions={this.debouncedSearch}
           loadOptions={this.debouncedSearch}
           onChange={onSelected}
           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"
           placeholder="Select a team"
-          loadingMessage={() => 'Loading...'}
           noOptionsMessage={() => 'No teams found'}
           noOptionsMessage={() => 'No teams found'}
-          getOptionValue={i => i.id}
-          getOptionLabel={i => i.label}
         />
         />
       </div>
       </div>
     );
     );