From fa4fddf7b595bf3a5830da318182b32fcc3811a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 11 Dec 2018 22:17:32 +0100
Subject: [PATCH] React-select refactorings

---
 .../core/components/Picker/PickerOption.tsx   | 35 +++++++++++++++----
 .../core/components/Picker/SimplePicker.tsx   |  2 ++
 .../app/core/components/Picker/TeamPicker.tsx |  2 +-
 .../app/core/components/Picker/UserPicker.tsx |  2 +-
 .../dashboard/dashgrid/DataSourcePicker.tsx   | 13 ++++---
 public/sass/_grafana.scss                     |  2 --
 .../sass/components/_description-picker.scss  | 35 -------------------
 public/sass/components/_form_select_box.scss  | 32 +++++++++++++++++
 public/sass/components/_user-picker.scss      | 12 -------
 9 files changed, 73 insertions(+), 62 deletions(-)
 delete mode 100644 public/sass/components/_description-picker.scss
 delete mode 100644 public/sass/components/_user-picker.scss

diff --git a/public/app/core/components/Picker/PickerOption.tsx b/public/app/core/components/Picker/PickerOption.tsx
index 98bb5dc566e..0ace067efc6 100644
--- a/public/app/core/components/Picker/PickerOption.tsx
+++ b/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;
diff --git a/public/app/core/components/Picker/SimplePicker.tsx b/public/app/core/components/Picker/SimplePicker.tsx
index 2ca8be43c75..08b16a12caf 100644
--- a/public/app/core/components/Picker/SimplePicker.tsx
+++ b/public/app/core/components/Picker/SimplePicker.tsx
@@ -1,6 +1,7 @@
 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}
diff --git a/public/app/core/components/Picker/TeamPicker.tsx b/public/app/core/components/Picker/TeamPicker.tsx
index f44717acd28..31b78b19830 100644
--- a/public/app/core/components/Picker/TeamPicker.tsx
+++ b/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,
         };
       });
 
diff --git a/public/app/core/components/Picker/UserPicker.tsx b/public/app/core/components/Picker/UserPicker.tsx
index f80a3fc135f..01dbb1fd3ea 100644
--- a/public/app/core/components/Picker/UserPicker.tsx
+++ b/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,
         }));
       })
diff --git a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx b/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
index fb5f16ba8a5..cd2856dbb91 100644
--- a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
+++ b/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,
           }}
         />
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 892a576fc87..8a05ed45a00 100644
--- a/public/sass/_grafana.scss
+++ b/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';
diff --git a/public/sass/components/_description-picker.scss b/public/sass/components/_description-picker.scss
deleted file mode 100644
index 365e9fd97f2..00000000000
--- a/public/sass/components/_description-picker.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.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;
-}
diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index caf3da13adb..c2735c5395d 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/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;
+}
diff --git a/public/sass/components/_user-picker.scss b/public/sass/components/_user-picker.scss
deleted file mode 100644
index 35a2a242746..00000000000
--- a/public/sass/components/_user-picker.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.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;
-}