wip

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

@@ -5,7 +5,7 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
 interface Props {
   children: JSX.Element;
   heading: string;
-  renderToolbar?: () => JSX.Element;
+  renderToolbar?: () => JSX.Element | JSX.Element[];
   toolbarItems?: EditorToolBarView[];
 }
 

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

@@ -36,6 +36,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
 
     this.state = {
       isVizPickerOpen: false,
+      searchQuery: '',
     };
   }
 
@@ -138,8 +139,16 @@ export class VisualizationTab extends PureComponent<Props, State> {
     this.setState({ isVizPickerOpen: true });
   };
 
-  renderToolbar = () => {
+  onSearchQueryChange = evt => {
+    const value = evt.target.value;
+    this.setState({
+      searchQuery: value,
+    });
+  };
+
+  renderToolbar = (): JSX.Element => {
     const { plugin } = this.props;
+    const { searchQuery } = this.state;
 
     if (this.state.isVizPickerOpen) {
       return (
@@ -148,6 +157,8 @@ export class VisualizationTab extends PureComponent<Props, State> {
             type="text"
             className="gf-form-input width-13"
             placeholder=""
+            onChange={this.onSearchQueryChange}
+            value={searchQuery}
             ref={elem => (this.searchInput = elem)}
           />
           <i className="gf-form-input-icon fa fa-search" />
@@ -164,9 +175,14 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
   };
 
+  onTypeChanged = (plugin: PanelPlugin) => {
+    // this.setState({ isVizPickerOpen: false });
+    this.props.onTypeChanged(plugin);
+  };
+
   render() {
-    const { plugin, onTypeChanged } = this.props;
+    const { plugin } = this.props;
-    const { isVizPickerOpen } = this.state;
+    const { isVizPickerOpen, searchQuery } = this.state;
 
     const panelHelp = {
       title: '',
@@ -176,7 +192,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
 
     return (
       <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}>
-        {isVizPickerOpen && <VizTypePicker current={plugin} onTypeChanged={onTypeChanged} />}
+        {isVizPickerOpen && <VizTypePicker current={plugin} onTypeChanged={this.onTypeChanged} searchQuery={searchQuery} />}
         {this.renderPanelOptions()}
       </EditorTabBody>
     );

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

@@ -4,7 +4,6 @@ import _ from 'lodash';
 import config from 'app/core/config';
 import { PanelPlugin } from 'app/types/plugins';
 import VizTypePickerPlugin from './VizTypePickerPlugin';
-import KeyboardNavigation, { KeyboardNavigationProps } from './KeyboardNavigation';
 
 export interface Props {
   current: PanelPlugin;
@@ -12,16 +11,12 @@ export interface Props {
   searchQuery: string;
 }
 
-export class VizTypePicker extends PureComponent<Props, State> {
+export class VizTypePicker extends PureComponent<Props> {
   searchInput: HTMLElement;
   pluginList = this.getPanelPlugins('');
 
   constructor(props) {
     super(props);
-
-    this.state = {
-      searchQuery: '',
-    };
   }
 
   get maxSelectedIndex() {
@@ -29,12 +24,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
     return filteredPluginList.length - 1;
   }
 
-  componentDidMount() {
-    setTimeout(() => {
-      this.searchInput.focus();
-    }, 300);
-  }
-
   getPanelPlugins(filter): PanelPlugin[] {
     const panels = _.chain(config.panels)
       .filter({ hideFromList: false })
@@ -45,27 +34,23 @@ export class VizTypePicker extends PureComponent<Props, State> {
     return _.sortBy(panels, 'sort');
   }
 
-  renderVizPlugin = (plugin: PanelPlugin, index: number, keyNavProps: KeyboardNavigationProps) => {
+  renderVizPlugin = (plugin: PanelPlugin, index: number) => {
     const { onTypeChanged } = this.props;
-    const { selected, onMouseEnter } = keyNavProps;
-    const isSelected = selected === index;
     const isCurrent = plugin.id === this.props.current.id;
+
     return (
       <VizTypePickerPlugin
         key={plugin.id}
-        isSelected={isSelected}
         isCurrent={isCurrent}
         plugin={plugin}
-        onMouseEnter={() => {
+        isSelected={false}
-          onMouseEnter(index);
-        }}
         onClick={() => onTypeChanged(plugin)}
       />
     );
   };
 
   getFilteredPluginList = (): PanelPlugin[] => {
-    const { searchQuery } = this.state;
+    const { searchQuery } = this.props;
     const regex = new RegExp(searchQuery, 'i');
     const pluginList = this.pluginList;
 
@@ -76,57 +61,11 @@ export class VizTypePicker extends PureComponent<Props, State> {
     return filtered;
   };
 
-  onSearchQueryChange = evt => {
-    const value = evt.target.value;
-    this.setState(prevState => ({
-      ...prevState,
-      searchQuery: value,
-    }));
-  };
-
-  renderFilters = ({ onKeyDown, selected }: KeyboardNavigationProps) => {
-    const { searchQuery } = this.state;
-    return (
-      <>
-        <label className="gf-form--has-input-icon">
-          <input
-            type="text"
-            className="gf-form-input width-13"
-            placeholder=""
-            ref={elem => (this.searchInput = elem)}
-            onChange={this.onSearchQueryChange}
-            value={searchQuery}
-            onKeyDown={evt => {
-              onKeyDown(evt, this.maxSelectedIndex, () => {
-                const { onTypeChanged } = this.props;
-                const vizType = this.getFilteredPluginList()[selected];
-                onTypeChanged(vizType);
-              });
-            }}
-          />
-          <i className="gf-form-input-icon fa fa-search" />
-        </label>
-      </>
-    );
-  };
-
   render() {
     const filteredPluginList = this.getFilteredPluginList();
 
     return (
-      <KeyboardNavigation
+      <div className="viz-picker">{filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}</div>
-        render={(keyNavProps: KeyboardNavigationProps) => (
-          <>
-            <div className="cta-form__bar">
-              {this.renderFilters(keyNavProps)}
-              <div className="gf-form--grow" />
-            </div>
-            <div className="viz-picker">
-              {filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index, keyNavProps))}
-            </div>
-          </>
-        )}
-      />
     );
   }
 }

public/sass/components/_panel_editor.scss

@@ -133,9 +133,12 @@
 }
 
 .viz-picker {
+  background: $panel-editor-toolbar-view-bg;
   display: flex;
   flex-wrap: wrap;
+  margin: -40px -20px;
   margin-bottom: 13px;
+  padding: 20px;
 }
 
 .viz-picker__item {