fixes to unit picker

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

@@ -50,6 +50,7 @@ export class DataSourcePicker extends PureComponent<Props> {
     return (
       <div className="gf-form-inline">
         <Select
+          className="ds-picker"
           isMulti={false}
           isClearable={false}
           backspaceRemovesValue={false}

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

@@ -9,7 +9,7 @@ interface State {
   expanded: boolean;
 }
 
-export default class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
+export default class OptionGroup extends PureComponent<ExtendedGroupProps, State> {
   state = {
     expanded: false,
   };
@@ -41,10 +41,10 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State>
     const { expanded } = this.state;
 
     return (
-      <div className="width-21 unit-picker-group" style={{ marginBottom: '5px' }}>
-        <div className="unit-picker-group-item" onClick={this.onToggleChildren}>
-          <span style={{ textTransform: 'capitalize' }}>{label}</span>
-          <i className={`fa ${expanded ? 'fa-minus' : 'fa-plus'}`} />{' '}
+      <div className="gf-form-select-box__option-group">
+        <div className="gf-form-select-box__option-group__header" onClick={this.onToggleChildren}>
+          <span className="flex-grow">{label}</span>
+          <i className={`fa ${expanded ? 'fa-caret-left' : 'fa-caret-down'}`} />{' '}
         </div>
         {expanded && children}
       </div>

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

@@ -7,6 +7,7 @@ import { components } from 'react-select';
 
 // Components
 import { Option, SingleValue } from './PickerOption';
+import OptionGroup from './OptionGroup';
 import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
 import ResetStyles from './ResetStyles';
@@ -29,7 +30,6 @@ interface CommonProps {
   width?: number;
   value?: SelectOptionItem;
   className?: string;
-  components: object;
   isDisabled?: boolean;
   isSearchable?: boolean;
   isClearable?: boolean;
@@ -65,7 +65,6 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
   static defaultProps = {
     width: null,
     className: '',
-    components: {},
     isDisabled: false,
     isSearchable: true,
     isClearable: false,
@@ -117,6 +116,7 @@ export class Select extends PureComponent<CommonProps & SelectProps> {
           SingleValue,
           IndicatorsContainer,
           MenuList,
+          Group: OptionGroup,
         }}
         defaultValue={defaultValue}
         value={value}

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

@@ -1,22 +0,0 @@
-import React, { SFC } from 'react';
-import { components } from 'react-select';
-import { OptionProps } from 'react-select/lib/components/Option';
-
-interface ExtendedOptionProps extends OptionProps<any> {
-  data: any;
-}
-
-const UnitOption: SFC<ExtendedOptionProps> = props => {
-  const { children, isSelected, className } = props;
-
-  return (
-    <components.Option {...props}>
-      <div className={`unit-picker-option__button btn btn-link ${className}`}>
-        {isSelected && <i className="fa fa-check pull-right" aria-hidden="true" />}
-        <div className="gf-form">{children}</div>
-      </div>
-    </components.Option>
-  );
-};
-
-export default UnitOption;

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

@@ -1,81 +0,0 @@
-import React, { PureComponent } from 'react';
-import Select from 'react-select';
-import UnitGroup from './UnitGroup';
-import UnitOption from './UnitOption';
-import ResetStyles from '../ResetStyles';
-import kbn from '../../../utils/kbn';
-
-interface Props {
-  onSelected: (item: any) => {} | void;
-  defaultValue?: string;
-  width?: number;
-}
-
-export default class UnitPicker extends PureComponent<Props> {
-  static defaultProps = {
-    width: 12,
-  };
-
-  render() {
-    const { defaultValue, onSelected, width } = this.props;
-
-    const unitGroups = kbn.getUnitFormats();
-
-    // Need to transform the data structure to work well with Select
-    const groupOptions = unitGroups.map(group => {
-      const options = group.submenu.map(unit => {
-        return {
-          label: unit.text,
-          value: unit.value,
-        };
-      });
-
-      return {
-        label: group.text,
-        options,
-      };
-    });
-
-    // const styles = {
-    //   ...ResetStyles,
-    //   menu: () => ({
-    //     maxHeight: '75%',
-    //     overflow: 'scroll',
-    //   }),
-    //   menuList: () =>
-    //     ({
-    //       overflowY: 'auto',
-    //       position: 'relative',
-    //     } as React.CSSProperties),
-    //   valueContainer: () =>
-    //     ({
-    //       overflow: 'hidden',
-    //       textOverflow: 'ellipsis',
-    //       maxWidth: '90px',
-    //       whiteSpace: 'nowrap',
-    //     } as React.CSSProperties),
-    // };
-
-    const value = groupOptions.map(group => {
-      return group.options.find(option => option.value === defaultValue);
-    });
-
-    return (
-      <Select
-        classNamePrefix="gf-form-select-box"
-        className={`width-${width} gf-form-input gf-form-input--form-dropdown`}
-        defaultValue={value}
-        isSearchable={true}
-        menuShouldScrollIntoView={false}
-        options={groupOptions}
-        placeholder="Choose"
-        onChange={onSelected}
-        components={{
-          Group: UnitGroup,
-          Option: UnitOption,
-        }}
-        styles={ResetStyles}
-      />
-    );
-  }
-}

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

@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react';
+import Select from './Select';
+import kbn from 'app/core/utils/kbn';
+
+interface Props {
+  onChange: (item: any) => {} | void;
+  defaultValue?: string;
+  width?: number;
+}
+
+export default class UnitPicker extends PureComponent<Props> {
+  static defaultProps = {
+    width: 12,
+  };
+
+  render() {
+    const { defaultValue, onChange, width } = this.props;
+
+    const unitGroups = kbn.getUnitFormats();
+
+    // Need to transform the data structure to work well with Select
+    const groupOptions = unitGroups.map(group => {
+      const options = group.submenu.map(unit => {
+        return {
+          label: unit.text,
+          value: unit.value,
+        };
+      });
+
+      return {
+        label: group.text,
+        options,
+      };
+    });
+
+    const value = groupOptions.map(group => {
+      return group.options.find(option => option.value === defaultValue);
+    });
+
+    return (
+      <Select
+        width={width}
+        defaultValue={value}
+        isSearchable={true}
+        options={groupOptions}
+        placeholder="Choose"
+        onChange={onChange}
+      />
+    );
+  }
+}

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/Select/Select';
-import UnitPicker from 'app/core/components/Select/Unit/UnitPicker';
+import UnitPicker from 'app/core/components/Select/UnitPicker';
 import { OptionModuleProps } from './module';
 
 const statOptions = [
@@ -52,7 +52,7 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> {
         </div>
         <div className="gf-form-inline">
           <Label width={labelWidth}>Unit</Label>
-          <UnitPicker defaultValue={unit} onSelected={value => this.onUnitChange(value)} />
+          <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
         </div>
         <div className="gf-form-inline">
           <Label width={labelWidth}>Decimals</Label>

public/sass/_grafana.scss

@@ -101,7 +101,6 @@
 @import 'components/delete_button';
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
-@import 'components/unit-picker';
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
 @import 'components/value-mappings';

public/sass/components/_form_select_box.scss

@@ -171,3 +171,19 @@ $select-input-bg-disabled: $input-bg-disabled;
   width: 16px;
   margin-right: 10px;
 }
+
+.gf-form-select-box__option-group__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  justify-items: center;
+  cursor: pointer;
+  padding: 7px 10px;
+  width: 100%;
+  border-bottom: 1px solid $hr-border-color;
+  text-transform: capitalize;
+
+  .fa {
+    padding-right: 2px;
+  }
+}

public/sass/components/_unit-picker.scss

@@ -1,24 +0,0 @@
-.unit-picker-option {
-  position: relative;
-  width: 100%;
-  display: block;
-  border-radius: 0;
-  white-space: normal;
-
-  i.fa-check {
-    padding-left: 2px;
-  }
-}
-
-.unit-picker-group {
-  margin-bottom: 5px;
-}
-
-.unit-picker-group-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  font-size: 14px;
-  border-bottom: 1px solid #555;
-}