wip

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

+// import React, { PureComponent } from 'react';
+// import Select as ReactSelect from 'react-select';
+// import DescriptionOption from './DescriptionOption';
+// import IndicatorsContainer from './IndicatorsContainer';
+// import ResetStyles from './ResetStyles';
+//
+// export interface OptionType {
+//   label: string;
+//   value: string;
+// }
+//
+// interface Props {
+//   defaultValue?: any;
+//   getOptionLabel: (item: T) => string;
+//   getOptionValue: (item: T) => string;
+//   onChange: (item: T) => {} | void;
+//   options: T[];
+//   placeholder?: string;
+//   width?: number;
+//   value: T;
+//   className?: string;
+// }
+//
+// export class Select<T> extends PureComponent<Props<T>> {
+//   static defaultProps = {
+//     width: null,
+//     className: '',
+//   }
+//
+//   render() {
+//     const { defaultValue, getOptionLabel, getOptionValue, onSelected, options, placeholder, width, value, className } = this.props;
+//     let widthClass = '';
+//     if (width) {
+//       widthClass = 'width-'+width;
+//     }
+//
+//   return (
+//     <ReactSelect
+//       classNamePrefix="gf-form-select-box"
+//       className={`gf-form-input gf-form-input--form-dropdown ${widthClass} ${className}`}
+//       components={{
+//         Option: DescriptionOption,
+//         IndicatorsContainer,
+//       }}
+//       defaultValue={defaultValue}
+//       value={value}
+//       getOptionLabel={getOptionLabel}
+//       getOptionValue={getOptionValue}
+//       menuShouldScrollIntoView={false}
+//       isSearchable={false}
+//       onChange={onSelected}
+//       options={options}
+//       placeholder={placeholder || 'Choose'}
+//       styles={ResetStyles}
+//     />
+//   );
+// }
+// }
+//
+// export default Select;

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

@@ -21,9 +21,23 @@ interface Props {
   onTypeChanged: (newType: PanelPlugin) => void;
 }
 
-export class VisualizationTab extends PureComponent<Props> {
+interface State {
+  isVizPickerOpen: boolean;
+  searchQuery: string;
+}
+
+export class VisualizationTab extends PureComponent<Props, State> {
   element: HTMLElement;
   angularOptions: AngularComponent;
+  searchInput: HTMLElement;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isVizPickerOpen: false,
+    };
+  }
 
   getPanelDefaultOptions = () => {
     const { panel, plugin } = this.props;
@@ -120,19 +134,40 @@ export class VisualizationTab extends PureComponent<Props> {
     this.forceUpdate();
   };
 
-  render() {
+  onOpenVizPicker = () => {
+    this.setState({ isVizPickerOpen: true });
+  };
+
+  renderToolbar = () => {
     const { plugin } = this.props;
 
-    const panelSelection = {
-      title: plugin.name,
-      imgSrc: plugin.info.logos.small,
-      render: () => {
-        // the needs to be scoped inside this closure
-        const { plugin, onTypeChanged } = this.props;
-        return <VizTypePicker current={plugin} onTypeChanged={onTypeChanged} />;
-      },
+    if (this.state.isVizPickerOpen) {
+      return (
+        <label className="gf-form--has-input-icon">
+          <input
+            type="text"
+            className="gf-form-input width-13"
+            placeholder=""
+            ref={elem => (this.searchInput = elem)}
+          />
+          <i className="gf-form-input-icon fa fa-search" />
+        </label>
+      );
+    } else {
+      return (
+        <div className="toolbar__main" onClick={this.onOpenVizPicker}>
+          <img className="toolbar__main-image" src={plugin.info.logos.small} />
+          <div className="toolbar__main-name">{plugin.name}</div>
+          <i className="fa fa-caret-down" />
+        </div>
+      );
+    }
   };
 
+  render() {
+    const { plugin, onTypeChanged } = this.props;
+    const { isVizPickerOpen } = this.state;
+
     const panelHelp = {
       title: '',
       icon: 'fa fa-question',
@@ -140,7 +175,8 @@ export class VisualizationTab extends PureComponent<Props> {
     };
 
     return (
-      <EditorTabBody heading="Visualization" main={panelSelection} toolbarItems={[panelHelp]}>
+      <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}>
+        {isVizPickerOpen && <VizTypePicker current={plugin} onTypeChanged={onTypeChanged} />}
         {this.renderPanelOptions()}
       </EditorTabBody>
     );

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

@@ -9,9 +9,6 @@ import KeyboardNavigation, { KeyboardNavigationProps } from './KeyboardNavigatio
 export interface Props {
   current: PanelPlugin;
   onTypeChanged: (newType: PanelPlugin) => void;
-}
-
-interface State {
   searchQuery: string;
 }
 

public/sass/components/_form_select_box.scss

@@ -54,6 +54,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 
 .gf-form-select-box__menu {
   background: $input-bg;
+  box-shadow: $menu-dropdown-shadow;
   position: absolute;
   z-index: 2;
   min-width: 100%;
@@ -81,7 +82,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 
   &.gf-form-select-box__option--is-focused {
     color: $dropdownLinkColorHover;
-    background-color: $dropdownLinkBackgroundHover;
+    background: $menu-dropdown-hover-bg;
     @include left-brand-border-gradient();
   }
 
@@ -96,9 +97,6 @@ $select-input-bg-disabled: $input-bg-disabled;
   display: none;
 }
 
-.gf-form-select-box__option {
-}
-
 .gf-form-select-box__value-container {
   display: table-cell;
   padding: 8px 10px;