Merge branch 'develop' of github.com:grafana/grafana into develop

b0c014bf · Torkel Ödegaard · d6c6ba64 · 4dbfcde7 · b0c014bf · b0c014bf
Commit b0c014bf authored Dec 11, 2018 by Torkel Ödegaard
Showing with 65 additions and 87 deletions

public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
+18 -25

public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx
+21 -15

public/app/features/dashboard/dashgrid/VizTypePicker.tsx
+26 -47

No files found.
--- a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
+++ b/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
-import withKeyboardNavigation from './withKeyboardNavigation';
+import KeyboardNavigation, { KeyboardNavigationProps } from './KeyboardNavigation';
 import { DataSourceSelectItem } from 'app/types';
 export interface Props {
-  onChangeDataSource: (ds: any) => void;
+  onChangeDataSource: (ds: DataSourceSelectItem) => void;
  datasources: DataSourceSelectItem[];
-  selected?: number;
-  onKeyDown?: (evt: any, maxSelectedIndex: number, onEnterAction: () => void) => void;
-  onMouseEnter?: (select: number) => void;
 }
 interface State {
  searchQuery: string;
 }
-export const DataSourcePicker = withKeyboardNavigation(
+export class DataSourcePicker extends PureComponent<Props, State> {
-  class DataSourcePicker extends PureComponent<Props, State> {
  searchInput: HTMLElement;
  constructor(props) {
@@ -44,8 +40,9 @@ export const DataSourcePicker = withKeyboardNavigation(
    return filtered.length - 1;
  }
-    renderDataSource = (ds: DataSourceSelectItem, index: number) => {
+  renderDataSource = (ds: DataSourceSelectItem, index: number, keyNavProps: KeyboardNavigationProps) => {
-      const { onChangeDataSource, selected, onMouseEnter } = this.props;
+    const { onChangeDataSource } = this.props;
+    const { selected, onMouseEnter } = keyNavProps;
    const onClick = () => onChangeDataSource(ds);
    const isSelected = selected === index;
    const cssClass = classNames({
@@ -53,13 +50,7 @@ export const DataSourcePicker = withKeyboardNavigation(
      'ds-picker-list__item--selected': isSelected,
    });
    return (
-        <div
+      <div key={index} className={cssClass} title={ds.name} onClick={onClick} onMouseEnter={() => onMouseEnter(index)}>
-          key={index}
-          className={cssClass}
-          title={ds.name}
-          onClick={onClick}
-          onMouseEnter={() => onMouseEnter(index)}
-        >
        <img className="ds-picker-list__img" src={ds.meta.info.logos.small} />
        <div className="ds-picker-list__name">{ds.name}</div>
      </div>
@@ -80,11 +71,9 @@ export const DataSourcePicker = withKeyboardNavigation(
    }));
  };
-    renderFilters() {
+  renderFilters({ onKeyDown, selected }: KeyboardNavigationProps) {
    const { searchQuery } = this.state;
-      const { onKeyDown } = this.props;
    return (
-        <>
      <label className="gf-form--has-input-icon">
        <input
          type="text"
@@ -95,7 +84,7 @@ export const DataSourcePicker = withKeyboardNavigation(
          value={searchQuery}
          onKeyDown={evt => {
            onKeyDown(evt, this.maxSelectedIndex, () => {
-                  const { onChangeDataSource, selected } = this.props;
+              const { onChangeDataSource } = this.props;
              const ds = this.getDataSources()[selected];
              onChangeDataSource(ds);
            });
@@ -103,22 +92,26 @@ export const DataSourcePicker = withKeyboardNavigation(
        />
        <i className="gf-form-input-icon fa fa-search" />
      </label>
-        </>
    );
  }
  render() {
    return (
+      <KeyboardNavigation
+        render={(keyNavProps: KeyboardNavigationProps) => (
          <>
            <div className="cta-form__bar">
-            {this.renderFilters()}
+              {this.renderFilters(keyNavProps)}
              <div className="gf-form--grow" />
            </div>
-          <div className="ds-picker-list">{this.getDataSources().map(this.renderDataSource)}</div>
+            <div className="ds-picker-list">
+              {this.getDataSources().map((ds, index) => this.renderDataSource(ds, index, keyNavProps))}
+            </div>
          </>
+        )}
+      />
    );
  }
-  }
+}
-);
 export default DataSourcePicker;
--- a/public/app/features/dashboard/dashgrid/withKeyboardNavigation.tsx
+++ b/public/app/features/dashboard/dashgrid/withKeyboardNavigation.tsx
-import React from 'react';
+import React, { KeyboardEvent, Component } from 'react';
-import { Props } from './DataSourcePicker';
 interface State {
  selected: number;
 }
-const withKeyboardNavigation = WrappedComponent => {
+export interface KeyboardNavigationProps {
-  return class extends React.Component<Props, State> {
+  onKeyDown: (evt: KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
+  onMouseEnter: (select: number) => void;
+  selected: number;
+}
+interface Props {
+  render: (injectProps: any) => void;
+}
+class KeyboardNavigation extends Component<Props, State> {
  constructor(props) {
    super(props);
@@ -50,16 +58,14 @@ const withKeyboardNavigation = WrappedComponent => {
  };
  render() {
-      return (
+    const injectProps = {
-        <WrappedComponent
+      onKeyDown: this.onKeyDown,
-          selected={this.state.selected}
+      onMouseEnter: this.onMouseEnter,
-          onKeyDown={this.onKeyDown}
+      selected: this.state.selected,
-          onMouseEnter={this.onMouseEnter}
-          {...this.props}
-        />
-      );
-    }
    };
-};
-export default withKeyboardNavigation;
+    return <>{this.props.render({ ...injectProps })}</>;
+  }
+}
+export default KeyboardNavigation;
--- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
+++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
@@ -4,15 +4,15 @@ import _ from 'lodash';
 import config from 'app/core/config';
 import { PanelPlugin } from 'app/types/plugins';
 import VizTypePickerPlugin from './VizTypePickerPlugin';
+import KeyboardNavigation, { KeyboardNavigationProps } from './KeyboardNavigation';
-interface Props {
+export interface Props {
  current: PanelPlugin;
  onTypeChanged: (newType: PanelPlugin) => void;
 }
 interface State {
  searchQuery: string;
-  selected: number;
 }
 export class VizTypePicker extends PureComponent<Props, State> {
@@ -24,7 +24,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
    this.state = {
      searchQuery: '',
-      selected: 0,
    };
  }
@@ -33,35 +32,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
    return filteredPluginList.length - 1;
  }
-  goRight = () => {
-    const nextIndex = this.state.selected >= this.maxSelectedIndex ? 0 : this.state.selected + 1;
-    this.setState({
-      selected: nextIndex,
-    });
-  };
-  goLeft = () => {
-    const nextIndex = this.state.selected <= 0 ? this.maxSelectedIndex : this.state.selected - 1;
-    this.setState({
-      selected: nextIndex,
-    });
-  };
-  onKeyDown = evt => {
-    if (evt.key === 'ArrowDown') {
-      evt.preventDefault();
-      this.goRight();
-    }
-    if (evt.key === 'ArrowUp') {
-      evt.preventDefault();
-      this.goLeft();
-    }
-    if (evt.key === 'Enter') {
-      const filteredPluginList = this.getFilteredPluginList();
-      this.props.onTypeChanged(filteredPluginList[this.state.selected]);
-    }
-  };
  componentDidMount() {
    setTimeout(() => {
      this.searchInput.focus();
@@ -78,14 +48,10 @@ export class VizTypePicker extends PureComponent<Props, State> {
    return _.sortBy(panels, 'sort');
  }
-  onMouseEnter = (mouseEnterIndex: number) => {
+  renderVizPlugin = (plugin: PanelPlugin, index: number, keyNavProps: KeyboardNavigationProps) => {
-    this.setState({
+    const { onTypeChanged } = this.props;
-      selected: mouseEnterIndex,
+    const { selected, onMouseEnter } = keyNavProps;
-    });
+    const isSelected = selected === index;
-  };
-  renderVizPlugin = (plugin: PanelPlugin, index: number) => {
-    const isSelected = this.state.selected === index;
    const isCurrent = plugin.id === this.props.current.id;
    return (
      <VizTypePickerPlugin
@@ -94,9 +60,9 @@ export class VizTypePicker extends PureComponent<Props, State> {
        isCurrent={isCurrent}
        plugin={plugin}
        onMouseEnter={() => {
-          this.onMouseEnter(index);
+          onMouseEnter(index);
        }}
-        onClick={() => this.props.onTypeChanged(plugin)}
+        onClick={() => onTypeChanged(plugin)}
      />
    );
  };
@@ -118,11 +84,11 @@ export class VizTypePicker extends PureComponent<Props, State> {
    this.setState(prevState => ({
      ...prevState,
      searchQuery: value,
-      selected: 0,
    }));
  };
-  renderFilters = () => {
+  renderFilters = ({ onKeyDown, selected }: KeyboardNavigationProps) => {
+    const { searchQuery } = this.state;
    return (
      <>
        <label className="gf-form--has-input-icon">
@@ -132,7 +98,14 @@ export class VizTypePicker extends PureComponent<Props, State> {
            placeholder=""
            ref={elem => (this.searchInput = elem)}
            onChange={this.onSearchQueryChange}
-            onKeyDown={this.onKeyDown}
+            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>
@@ -144,13 +117,19 @@ export class VizTypePicker extends PureComponent<Props, State> {
    const filteredPluginList = this.getFilteredPluginList();
    return (
+      <KeyboardNavigation
+        render={(keyNavProps: KeyboardNavigationProps) => (
          <>
            <div className="cta-form__bar">
-          {this.renderFilters()}
+              {this.renderFilters(keyNavProps)}
              <div className="gf-form--grow" />
            </div>
-        <div className="viz-picker">{filteredPluginList.map(this.renderVizPlugin)}</div>
+            <div className="viz-picker">
+              {filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index, keyNavProps))}
+            </div>
          </>
+        )}
+      />
    );
  }
 }