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

This reverts commit 11db48e76e569b6e247511f2d312a8d83930c573.

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

@@ -36,7 +36,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     toolbarItems: [],
   };
 
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
 
     this.state = {

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

@@ -1,5 +1,5 @@
 // Libraries
-import React, { PureComponent, ChangeEvent } from 'react';
+import React, { PureComponent } from 'react';
 
 // Utils & Services
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
@@ -31,7 +31,6 @@ interface Props {
 interface State {
   isVizPickerOpen: boolean;
   searchQuery: string;
-  searchResults: PanelPlugin[];
   scrollTop: number;
 }
 
@@ -40,13 +39,12 @@ export class VisualizationTab extends PureComponent<Props, State> {
   angularOptions: AngularComponent;
   searchInput: HTMLElement;
 
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
 
     this.state = {
       isVizPickerOpen: this.props.urlOpenVizPicker,
       searchQuery: '',
-      searchResults: [],
       scrollTop: 0,
     };
   }
@@ -172,7 +170,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
     this.setState({ isVizPickerOpen: false });
   };
 
-  onSearchQueryChange = (evt: ChangeEvent<HTMLInputElement>) => {
+  onSearchQueryChange = evt => {
     const value = evt.target.value;
     this.setState({
       searchQuery: value,
@@ -189,7 +187,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
           <label className="gf-form--has-input-icon">
             <input
               type="text"
-              className={`gf-form-input width-13 ${!this.hasSearchResults ? 'gf-form-input--invalid' : ''}`}
+              className="gf-form-input width-13"
               placeholder=""
               onChange={this.onSearchQueryChange}
               value={searchQuery}
@@ -221,16 +219,6 @@ 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>) => {
@@ -263,7 +251,6 @@ export class VisualizationTab extends PureComponent<Props, State> {
               onTypeChanged={this.onTypeChanged}
               searchQuery={searchQuery}
               onClose={this.onCloseVizPicker}
-              onPluginListChange={this.setSearchResults}
             />
           </FadeIn>
           {this.renderPanelOptions()}

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

@@ -10,14 +10,13 @@ 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: Props) {
+  constructor(props) {
     super(props);
   }
 
@@ -51,7 +50,7 @@ export class VizTypePicker extends PureComponent<Props> {
   };
 
   getFilteredPluginList = (): PanelPlugin[] => {
-    const { searchQuery, onPluginListChange } = this.props;
+    const { searchQuery } = this.props;
     const regex = new RegExp(searchQuery, 'i');
     const pluginList = this.pluginList;
 
@@ -59,7 +58,6 @@ export class VizTypePicker extends PureComponent<Props> {
       return regex.test(item.name);
     });
 
-    onPluginListChange(filtered);
     return filtered;
   };