use new generic picker

public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import GroupHeading from 'app/core/components/Picker/GroupHeading';
-import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-
-export interface Props {
-  onChange: (value: string) => void;
-  groups: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-}
-
-export class OptionGroupPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { onChange, groups, selected, placeholder, className, searchable } = this.props;
-    const options = _.flatten(groups.map(o => o.options));
-    const selectedOption = options.find(option => option.value === selected);
-
-    return (
-      <Select
-        placeholder={placeholder}
-        classNamePrefix={`gf-form-select-box`}
-        className={className}
-        options={groups}
-        components={{
-          GroupHeading,
-          Option: DescriptionOption,
-          IndicatorsContainer,
-          NoOptionsMessage,
-        }}
-        styles={ResetStyles}
-        isSearchable={searchable}
-        onChange={option => onChange(option.value)}
-        getOptionValue={i => i.value}
-        getOptionLabel={i => i.label}
-        value={selectedOption}
-        noOptionsMessage={() => 'No metrics found'}
-      />
-    );
-  }
-}

public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-
-export interface Props {
-  onChange: (value: string) => void;
-  options: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-  groups?: boolean;
-}
-
-export class OptionPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { onChange, options, selected, placeholder, className, searchable } = this.props;
-    const selectedOption = options.find(option => option.value === selected);
-
-    return (
-      <Select
-        placeholder={placeholder}
-        classNamePrefix={`gf-form-select-box`}
-        className={className}
-        options={options}
-        components={{
-          Option: DescriptionOption,
-          IndicatorsContainer,
-          NoOptionsMessage,
-        }}
-        styles={ResetStyles}
-        isSearchable={searchable}
-        onChange={option => onChange(option.value)}
-        getOptionValue={i => i.value}
-        getOptionLabel={i => i.label}
-        value={selectedOption}
-        noOptionsMessage={() => 'No metrics found'}
-      />
-    );
-  }
-}

public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import _ from 'lodash';
+import Select from 'app/core/components/Select/Select';
+
+export interface Props {
+  onChange: (value: string) => void;
+  options: any[];
+  searchable: boolean;
+  selected: string;
+  placeholder?: string;
+  className?: string;
+  groups?: boolean;
+}
+
+export class StackdriverPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  extractOptions(options) {
+    return options.length > 0 && options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
+  }
+
+  onChange = item => {
+    const extractedOptions = this.extractOptions(this.props.options);
+    const option = extractedOptions.find(option => option.value === item.value);
+    this.props.onChange(option.value);
+  };
+
+  render() {
+    const { options, selected, placeholder, className, searchable } = this.props;
+    const extractedOptions = this.extractOptions(options);
+    const selectedOption = extractedOptions.find(option => option.value === selected);
+
+    return (
+      <Select
+        className={className}
+        isMulti={false}
+        isClearable={false}
+        backspaceRemovesValue={false}
+        onChange={this.onChange}
+        options={options}
+        autoFocus={false}
+        isSearchable={searchable}
+        openMenuOnFocus={true}
+        maxMenuHeight={500}
+        placeholder={placeholder}
+        noOptionsMessage={() => 'No options found'}
+        value={selectedOption}
+      />
+    );
+  }
+}