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