React-select refactorings

public/app/core/components/Picker/PickerOption.tsx

@@ -4,19 +4,40 @@ import { OptionProps } from 'react-select/lib/components/Option';
 
 // https://github.com/JedWatson/react-select/issues/3038
 interface ExtendedOptionProps extends OptionProps<any> {
-  data: any;
+  data: {
+    description?: string;
+    imgUrl?: string;
+  };
 }
 
-export const PickerOption = (props: ExtendedOptionProps) => {
-  const { children, data, className } = props;
+export const Option = (props: ExtendedOptionProps) => {
+  const { children, isSelected, data } = props;
+
   return (
     <components.Option {...props}>
-      <div className={`description-picker-option__button btn btn-link ${className}`}>
-        {data.avatarUrl && <img src={data.avatarUrl} alt={data.label} className="user-picker-option__avatar" />}
-        {children}
+      <div className="gf-form-select-box__desc-option">
+        {data.imgUrl && <img className="gf-form-select-box__desc-option__img" src={data.imgUrl} />}
+        <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 PickerOption;
+export const SingleValue = (props: ExtendedOptionProps) => {
+  const { children, data } = props;
+
+  return (
+    <components.SingleValue {...props}>
+      <div className="gf-form-select-box__img-value">
+        {data.imgUrl && <img className="gf-form-select-box__desc-option__img" src={data.imgUrl} />}
+        {children}
+      </div>
+    </components.SingleValue>
+  );
+};
+
+export default Option;

public/app/core/components/Picker/SimplePicker.tsx

 import React, { SFC } from 'react';
 import Select from 'react-select';
 import DescriptionOption from './DescriptionOption';
+import IndicatorsContainer from './IndicatorsContainer';
 import ResetStyles from './ResetStyles';
 
 interface Props {
@@ -32,6 +33,7 @@ const SimplePicker: SFC<Props> = ({
       className={`width-${width} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
       components={{
         Option: DescriptionOption,
+        IndicatorsContainer,
       }}
       defaultValue={defaultValue}
       value={value}

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

@@ -47,7 +47,7 @@ export class TeamPicker extends Component<Props, State> {
           id: team.id,
           label: team.name,
           name: team.name,
-          avatarUrl: team.avatarUrl,
+          imgUrl: team.avatarUrl,
         };
       });
 

public/app/core/components/Picker/UserPicker.tsx

@@ -41,7 +41,7 @@ export class UserPicker extends Component<Props, State> {
         return result.map(user => ({
           id: user.userId,
           label: user.login === user.email ? user.login : `${user.login} - ${user.email}`,
-          avatarUrl: user.avatarUrl,
+          imgUrl: user.avatarUrl,
           login: user.login,
         }));
       })

public/app/features/dashboard/dashgrid/DataSourcePicker.tsx

@@ -4,7 +4,7 @@ import _ from 'lodash';
 
 // Components
 import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import PickerOption from 'app/core/components/Picker/PickerOption';
+import { Option, SingleValue } from 'app/core/components/Picker/PickerOption';
 import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
 import Select from 'react-select';
 
@@ -35,10 +35,14 @@ export class DataSourcePicker extends PureComponent<Props> {
     const options = datasources.map(ds => ({
       value: ds.name,
       label: ds.name,
-      avatarUrl: ds.meta.info.logos.small,
+      imgUrl: ds.meta.info.logos.small,
     }));
 
-    const value = { label: current.name, label: current.name };
+    const value = {
+      label: current.name,
+      value: current.name,
+      imgUrl: current.meta.info.logos.small,
+    };
 
     return (
       <div className="gf-form-inline">
@@ -57,7 +61,8 @@ export class DataSourcePicker extends PureComponent<Props> {
           noOptionsMessage={() => 'No datasources found'}
           value={value}
           components={{
-            Option: PickerOption,
+            Option,
+            SingleValue,
             IndicatorsContainer,
           }}
         />

public/sass/_grafana.scss

@@ -96,8 +96,6 @@
 @import 'components/empty_list_cta';
 @import 'components/popper';
 @import 'components/form_select_box';
-@import 'components/user-picker';
-@import 'components/description-picker';
 @import 'components/panel_editor';
 @import 'components/toolbar';
 @import 'components/delete_button';

public/sass/components/_description-picker.scss

-.description-picker-option__button {
-  position: relative;
-  text-align: left;
-  width: 100%;
-  display: block;
-  border-radius: 0;
-  white-space: normal;
-  i.fa-check {
-    padding-left: 2px;
-  }
-}
-
-.gf-form-select-box__desc-option {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  justify-items: center;
-  cursor: pointer;
-  padding: 7px 10px;
-  width: 100%;
-}
-
-.gf-form-select-box__desc-option__body {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding-right: 10px;
-  font-weight: 500;
-}
-
-.gf-form-select-box__desc-option__desc {
-  font-weight: normal;
-  font-size: $font-size-sm;
-  color: $text-muted;
-}

public/sass/components/_form_select_box.scss

@@ -47,6 +47,9 @@ $select-input-bg-disabled: $input-bg-disabled;
 
 .gf-form-select-box__input {
   padding-left: 5px;
+  input {
+    line-height: inherit;
+  }
 }
 
 .gf-form-select-box__menu {
@@ -140,3 +143,32 @@ $select-input-bg-disabled: $input-bg-disabled;
     padding-left: 30px;
   }
 }
+
+.gf-form-select-box__desc-option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  justify-items: center;
+  cursor: pointer;
+  padding: 7px 10px;
+  width: 100%;
+}
+
+.gf-form-select-box__desc-option__body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding-right: 10px;
+  font-weight: 500;
+}
+
+.gf-form-select-box__desc-option__desc {
+  font-weight: normal;
+  font-size: $font-size-sm;
+  color: $text-muted;
+}
+
+.gf-form-select-box__desc-option__img {
+  width: 20px;
+  margin-right: 10px;
+}

public/sass/components/_user-picker.scss

-.user-picker-option__button {
-  position: relative;
-  text-align: left;
-  width: 100%;
-  display: block;
-  border-radius: 0;
-}
-.user-picker-option__avatar {
-  width: 20px;
-  display: inline-block;
-  margin-right: 10px;
-}