Commit 11db48e7 by Johannes Schill

feat: Highlight vizpicker input when there are no panels matching the search query

parent b1aa8480
......@@ -36,7 +36,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
toolbarItems: [],
};
constructor(props) {
constructor(props: Props) {
super(props);
this.state = {
......
// Libraries
import React, { PureComponent } from 'react';
import React, { PureComponent, ChangeEvent } from 'react';
// Utils & Services
import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
......@@ -31,6 +31,7 @@ interface Props {
interface State {
isVizPickerOpen: boolean;
searchQuery: string;
searchResults: PanelPlugin[];
scrollTop: number;
}
......@@ -39,12 +40,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
angularOptions: AngularComponent;
searchInput: HTMLElement;
constructor(props) {
constructor(props: Props) {
super(props);
this.state = {
isVizPickerOpen: this.props.urlOpenVizPicker,
searchQuery: '',
searchResults: [],
scrollTop: 0,
};
}
......@@ -170,7 +172,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
this.setState({ isVizPickerOpen: false });
};
onSearchQueryChange = evt => {
onSearchQueryChange = (evt: ChangeEvent<HTMLInputElement>) => {
const value = evt.target.value;
this.setState({
searchQuery: value,
......@@ -187,7 +189,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
<label className="gf-form--has-input-icon">
<input
type="text"
className="gf-form-input width-13"
className={`gf-form-input width-13 ${!this.hasSearchResults ? 'gf-form-input--invalid' : ''}`}
placeholder=""
onChange={this.onSearchQueryChange}
value={searchQuery}
......@@ -219,6 +221,16 @@ export class VisualizationTab extends PureComponent<Props, State> {
}
};
setSearchResults = (searchResults: PanelPlugin[]) => {
this.setState({
searchResults: searchResults
});
};
get hasSearchResults () {
return this.state.searchResults && this.state.searchResults.length > 0;
}
renderHelp = () => <PluginHelp plugin={this.props.plugin} type="help" />;
setScrollTop = (event: React.MouseEvent<HTMLElement>) => {
......@@ -251,6 +263,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
onTypeChanged={this.onTypeChanged}
searchQuery={searchQuery}
onClose={this.onCloseVizPicker}
onPluginListChange={this.setSearchResults}
/>
</FadeIn>
{this.renderPanelOptions()}
......
......@@ -10,13 +10,14 @@ export interface Props {
onTypeChanged: (newType: PanelPlugin) => void;
searchQuery: string;
onClose: () => void;
onPluginListChange: (searchResults: PanelPlugin[]) => void;
}
export class VizTypePicker extends PureComponent<Props> {
searchInput: HTMLElement;
pluginList = this.getPanelPlugins('');
constructor(props) {
constructor(props: Props) {
super(props);
}
......@@ -50,7 +51,7 @@ export class VizTypePicker extends PureComponent<Props> {
};
getFilteredPluginList = (): PanelPlugin[] => {
const { searchQuery } = this.props;
const { searchQuery, onPluginListChange } = this.props;
const regex = new RegExp(searchQuery, 'i');
const pluginList = this.pluginList;
......@@ -58,6 +59,7 @@ export class VizTypePicker extends PureComponent<Props> {
return regex.test(item.name);
});
onPluginListChange(filtered);
return filtered;
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment