diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx index e33ba4355c0..29dc218e174 100644 --- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx +++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx @@ -159,7 +159,7 @@ export class VisualizationTab extends PureComponent { placeholder="" onChange={this.onSearchQueryChange} value={searchQuery} - ref={elem => (this.searchInput = elem)} + ref={elem => elem && elem.focus()} /> @@ -192,8 +192,12 @@ export class VisualizationTab extends PureComponent { return ( - {isVizPickerOpen && } - {this.renderPanelOptions()} + <> + {isVizPickerOpen && ( + + )} + {this.renderPanelOptions()} + ); } diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index c1f5f0fac7a..211890d9c03 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -43,7 +43,6 @@ export class VizTypePicker extends PureComponent { key={plugin.id} isCurrent={isCurrent} plugin={plugin} - isSelected={false} onClick={() => onTypeChanged(plugin)} /> ); diff --git a/public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx b/public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx index d4ed96d1434..430cf7c7ee3 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx @@ -1,32 +1,29 @@ -import React from 'react'; +import React from 'react'; import classNames from 'classnames'; import { PanelPlugin } from 'app/types/plugins'; interface Props { - isSelected: boolean; isCurrent: boolean; plugin: PanelPlugin; onClick: () => void; - onMouseEnter: () => void; } const VizTypePickerPlugin = React.memo( - ({ isSelected, isCurrent, plugin, onClick, onMouseEnter }: Props) => { + ({ isCurrent, plugin, onClick }: Props) => { const cssClass = classNames({ 'viz-picker__item': true, - 'viz-picker__item--selected': isSelected, 'viz-picker__item--current': isCurrent, }); return ( -
+
{plugin.name}
); }, (prevProps, nextProps) => { - if (prevProps.isSelected === nextProps.isSelected && prevProps.isCurrent === nextProps.isCurrent) { + if (prevProps.isCurrent === nextProps.isCurrent) { return true; } return false; diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index c7d69766633..898139afd3a 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -165,7 +165,7 @@ border: 1px solid $orange; } - &--selected { + &:hover { box-shadow: $panel-editor-viz-item-shadow-hover; background: $panel-editor-viz-item-bg-hover; border: $panel-editor-viz-item-border-hover;